Material-UI style buttons on the right

Question

How do you align buttons on the right using Material-UI's makeStyles function?

I have tried using CSS's margin-right: 0 tag, but there is an error using '-' with makeStyles. I renamed it as 'marginRight' and it still does not work. Also mr: 0 is not valid either. (Using Material-UI's spacing).

The code is trying to make the UI similar to stackOverflow's title layout.

import React from 'react';
import { makeStyles } from "@material-ui/core/styles";
import { Box, Button } from "@material-ui/core";

const style = makeStyles({
  titleItemRight: {
    color: 'white',
    backgroundColor: 'blue',
    top: '50%',
    height: 30,
    align: 'right',
    position: 'relative',
    transform: 'translateY(-50%)',
  }
});

const App = () => {
  const classes = style();

  return (
    <div>
      <Box className={classes.titleBar}>
        <Button variant='text' className={classes.titleItemRight}>Sign In</Button>
      </Box>
    </div>
  );
};

Answer 1

Change,

align: 'right'

To,

float: 'right'

So the code would look like,

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Box, Button } from "@material-ui/core";

const style = makeStyles({
  titleItemRight: {
    color: "white",
    backgroundColor: "blue",
    top: "50%",
    height: 30,
    float: "right",
    position: "relative",
    transform: "translateY(-50%)"
  }
});

const App = () => {
  const classes = style();

  return (
    <div>
      <Box className={classes.titleBar}>
        <Button variant="text" className={classes.titleItemRight}>
          Sign In
        </Button>
      </Box>
    </div>
  );
};

Working Codesandbox

Answer 2

I'd suggest using a flexbox for this or just using the AppBar provided already by material ui

https://material-ui.com/components/app-bar/#app-bar

if you'd still like to use Box, just edit the titleBar styles this way and add a spacer element to seperate elements to far right or far left

const style = makeStyles({
  titleBar: {
    display: 'flex',
    width:'100%',
    flexFlow: 'row',
  },
  spacer: {
   flex: '1 1 auto'
  }
});

and then your component

  <Box className={classes.titleBar}>
    <LogoHere/>
    <div className={classes.spacer}/>
    <Button variant="text">
      Sign In
    </Button>
  </Box>