如何在MUI v5中让内容组件显示在AppBar下方不被遮挡

方案1：使用空Toolbar组件占位（官方推荐） #

这是最简便无额外配置的方案，AppBar默认高度和内置的Toolbar组件高度完全对齐，直接在AppBar后追加一个空的Toolbar标签即可自动撑开顶部间距，避免内容被遮挡，示例代码如下：

import { AppBar, Toolbar, Box } from '@mui/material';

export default function Layout() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="fixed">
        <Toolbar>
          {/* AppBar内部原有内容：标题、操作按钮等 */}
        </Toolbar>
      </AppBar>
      {/* 占位用空Toolbar，自动匹配顶部栏高度 */}
      <Toolbar />
      {/* 页面主体内容 */}
      <Box component="main">
        你的页面内容
      </Box>
    </Box>
  );
}

该方案不需要额外处理响应式，Toolbar的高度会自动跟随断点变化适配。

方案2：使用theme.mixins.toolbar（兼容v4使用习惯） #

v5版本依然保留了theme.mixins.toolbar配置，你可以直接将其对应的minHeight作为内容容器的顶部内边距即可：

// 直接在sx属性中使用
<Box component="main" sx={{ pt: (theme) => theme.mixins.toolbar.minHeight }}>
  你的页面内容
</Box>

如果使用styled组件封装，写法如下：

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';

const MainContainer = styled(Box)(({ theme }) => ({
  paddingTop: theme.mixins.toolbar.minHeight
}));

// 业务代码中直接使用
<MainContainer>
  你的页面内容
</MainContainer>

关于position='sticky'的问题说明 #

sticky定位依赖父容器的滚动规则，若父容器存在overflow限制、高度不足等情况，很容易出现滚动时不吸顶、位置偏移等不符合预期的问题，固定顶部栏场景下优先使用position='fixed'搭配上述两种占位方案，稳定性更高。

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