css - 如何在 MUI AppBar 中将 Button 对齐到最右边？

Question

我无法理解如何在 MUI 中对齐元素。我有以下代码:

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

由以下人员组成:

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

但不幸的是内容仍然停留在左边。使用此资源 https://mui.com/system/properties ，我可能在这里遗漏了一个重要的 CSS 概念。谁能赐教一下？

谢谢。

Answer 1

Toolbar 是一个 flexbox，所以你可以在左侧添加一个 div 并将 justify-content 设置为 space-在 之间将 Button 推到右边:

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