基于material-ui如何在移动端将两个按钮对齐到标题右侧

你可以直接用Material UI内置的断点系统实现需求，无需手写原生CSS媒体查询，以下是最易维护的实现方式：

核心思路 #

利用MUIsx属性的断点语法，控制不同屏幕尺寸下元素的布局逻辑：移动端时将标题和两个按钮放在同一行布局容器内，桌面端恢复原有的左右分离排布。

具体实现步骤 #

方式1：sx断点控制（推荐） #

直接修改头部Toolbar的结构即可，代码示例如下：

import { AppBar, Toolbar, Typography, Button, IconButton, Box } from '@mui/material';
import HelpIcon from '@mui/icons-material/Help';

function Header() {
  return (
    <AppBar position="static">
      <Toolbar>
        {/* 移动端共用布局容器：标题+按钮 */}
        <Box 
          sx={{
            display: 'flex',
            alignItems: 'center',
            width: { xs: '100%', sm: 'auto' }
          }}
        >
          <Typography 
            variant="h6" 
            component="h1"
            sx={{ mr: { xs: 2, sm: 0 } }}
          >
            Authentication
          </Typography>
          {/* 移动端按钮组：sm以下显示 */}
          <Box sx={{ display: { xs: 'flex', sm: 'none' }, gap: 1, ml: 'auto' }}>
            <Button size="small" color="inherit">Web Setup</Button>
            <IconButton size="small" color="inherit">
              <HelpIcon />
            </IconButton>
          </Box>
        </Box>

        {/* 桌面端才生效的占位空间，把按钮推到最右 */}
        <Box sx={{ flexGrow: { xs: 0, sm: 1 } }} />

        {/* 桌面端按钮组：sm及以上显示 */}
        <Box sx={{ display: { xs: 'none', sm: 'flex' }, gap: 1 }}>
          <Button color="inherit">Web Setup</Button>
          <IconButton color="inherit">
            <HelpIcon />
          </IconButton>
        </Box>
      </Toolbar>
    </AppBar>
  )
}

这种双按钮组的写法逻辑清晰，不会出现布局错乱问题，MUI只会渲染对应断点下的组件，无额外性能损耗。

方式2：useMediaQuery动态控制 #

如果需要更复杂的交互逻辑，可以用钩子判断当前屏幕尺寸：

import { useTheme, useMediaQuery } from '@mui/material';

function Header() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  // 可通过isMobile变量动态控制元素顺序、样式、是否渲染
  return (
    // 其他结构和方式1一致，动态属性可以直接用isMobile判断
    <Typography sx={{ mr: isMobile ? 2 : 0 }}>Authentication</Typography>
  )
}

调整说明 #

• 默认sm断点阈值是600px，你可以通过自定义MUI主题修改断点阈值
• 移动端可给按钮加size="small"属性，节省头部空间
• 如果需要按钮紧贴标题右侧，删除移动端按钮组的ml: 'auto'属性即可

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