[英]How to align a Button to the far right in MUI AppBar?
I'm having trouble understanding how to align items in MUI.我无法理解如何在 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.使用此资源https://mui.com/system/properties ,我可能会在这里遗漏一个重要的 CSS 概念。 Could anyone enlighten me?有人可以启发我吗?
Thank you.谢谢你。
我敢肯定,你只需要改变sx={{ justifyContent: "flex-end" }}
到sx={{ marginLeft: "auto" }}
上的Button
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
是一个 flexbox,因此您可以在左侧添加一个div
并将justify-content
设置justify-content
space-between
以将Button
推到右侧:
<Toolbar sx={{ justifyContent: "space-between" }}>
<div />
<SignUpForm />
</Toolbar>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.