How to align a Button to the far right in MUI AppBar?

user_9087739 0
Viewed 2374

I'm having trouble understanding how to align items in MUI. I have the following code:

class SignUpForm extends React.Component {
    render() {
        return (
            <Button sx={{ justifyContent: "flex-end" }}
                color="inherit" }>Sign Up</Button>
        )
    }
}

which is composed by:

class Nav extends React.Component {
    render() {
        return (
            <Box sx={{ flexGrow: 1}}>
                <AppBar position="static">
                    <Toolbar>
                        <SignUpForm />
                    </Toolbar>
                </AppBar>
            </Box>
        )
    }
}

But unfortunately the content is still staying to the left. Using this resource https://mui.com/system/properties, I might be missing an important CSS concept here. Could anyone enlighten me?

enter image description here

Thank you.

material-ui reactjs css
2 Answers

I'm pretty sure you just need to change sx={{ justifyContent: "flex-end" }} to sx={{ marginLeft: "auto" }} on the Button

user_55528740

Toolbar is a flexbox, so you can add a div on the left side and set justify-content to space-between to push the Button to the right:

<Toolbar sx={{ justifyContent: "space-between" }}>
  <div />
  <SignUpForm />
</Toolbar>

Codesandbox Demo

user_94494260
Related