如何在 MUI AppBar 中将按钮对齐到最右侧？

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

我很确定你只需要更改sx={{ justifyContent: "flex-end" }}为sx={{ marginLeft: "auto" }}Button

Answer 2

Toolbar是一个弹性盒子，所以你可以div在左侧添加一个并将其设置justify-content为space-between将其推Button到右侧：

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