I'm struggling to grasp the concept of aligning items in MUI. Here is my code snippet:
class SignUpForm extends React.Component {
render() {
return (
<Button sx={{ justifyContent: "flex-end" }}
color="inherit" }>Sign Up</Button>
)
}
}
which consists of:
class Nav extends React.Component {
render() {
return (
<Box sx={{ flexGrow: 1}}>
<AppBar position="static">
<Toolbar>
<SignUpForm />
</Toolbar>
</AppBar>
</Box>
)
}
}
Despite my efforts, the content remains aligned to the left. Is there something crucial I might have overlooked from this resource https://mui.com/system/properties? Any insights would be greatly appreciated.
https://i.stack.imgur.com/EO788.png
Thank you.