Is there a way to align buttons on the right using Material-UI's makeStyles function? I have tried using CSS properties like margin-right: 0, but encountered errors when using '-' with makeStyles. I even tried renaming it as 'marginRight' without success. Additionally, using properties like mr: 0 is not valid (Using Material-UI's spacing).
The goal is to create a UI layout 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 useStyles = makeStyles({
titleItemRight: {
color: 'white',
backgroundColor: 'blue',
top: '50%',
height: 30,
textAlign: 'right',
position: 'relative',
transform: 'translateY(-50%)',
}
});
const App = () => {
const classes = useStyles();
return (
<div>
<Box className={classes.titleBar}>
<Button variant='text' className={classes.titleItemRight}>Sign In</Button>
</Box>
</div>
);
};