如何在MUI AppBar组件中将Button按钮对齐到最右侧

问题原因 #

你将justifyContent: "flex-end"加在了Button元素上，这一属性是flex布局的父容器属性，仅能控制容器内部子元素的对齐规则，无法控制元素本身在父容器中的位置。同时你的代码存在语法问题：Button标签末尾多了多余的闭合大括号，会引发运行报错。

解决方案 #

有两种常用实现方式，可根据你的布局场景选择：

方案1：给父容器Toolbar设置对齐规则 #

如果Toolbar内仅需要这一个按钮靠右对齐，直接给Toolbar添加flex对齐属性即可：

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

方案2：给Button添加自动左外边距 #

如果Toolbar左侧还有其他元素（比如品牌Logo、导航链接等），给Button加marginLeft: "auto"更灵活，该属性会自动占满左侧所有剩余空间，将按钮推到最右侧，同时修正原代码的语法错误：

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

内容的提问来源于stack exchange，提问作者Paul