如何在Material-UI中将按钮右对齐？新手技术求助

在Material-UI的Toolbar中实现按钮右对齐，核心是利用flex布局的特性。Toolbar默认已经是display: flex布局，只需给按钮容器添加margin-left: auto即可将其推至右侧。

修改后的完整代码 #

import * as React from "react";
import Button from "@mui/material/Button";
import { AppBar, IconButton, Toolbar, Typography } from "@mui/material";
import { Box, Container } from "@mui/system";
import MenuIcon from "@mui/icons-material/Menu";

function App() {
  return (
    <AppBar position="fixed">
      <Container fixed>
        <Toolbar>
          <IconButton
            edge="start" // 注意属性名应为小写，原代码大写会失效
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h5">
            Hotels Ua
          </Typography>
          {/* 包裹按钮的容器，通过margin-left:auto实现右对齐 */}
          <Box sx={{ marginLeft: 'auto', display: 'flex', gap: 1 }}>
            <Button color="inherit" variant="outlined">
              Log in
            </Button>
            <Button color="secondary" variant="contained">
              Sign up
            </Button>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}

export default App;

关键说明 #

• margin-left: auto：在flex容器中，该属性会让容器占据左侧所有剩余空间，从而将内部按钮推至最右侧，完美适配你的需求（保留左侧菜单和标题，仅按钮右对齐）。
• 用单个Box包裹两个按钮，通过gap:1控制按钮间距，替代原代码中单独设置的mr={1}，更简洁统一。
• 修正原代码中Edge="start"的错误，Material-UI组件属性名应为小写的edge="start"，否则该属性不会生效。

你之前尝试的justifyContent="flex-end"如果直接加在Toolbar上，会让所有元素（菜单、标题、按钮）都右对齐，不符合你的布局需求，因此针对性给按钮容器设置margin-left:auto是最优解。

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