我用 Material-UI 的 AppBar 设置了 position=”fixed&#8221 […]

AppBar固定在顶部后内容被遮挡怎么办？

UP主～恒宇提问于 2026-03-17 20:49:21 阅读 107

组件

我用 Material-UI 的 AppBar 设置了 position=”fixed”，结果下面的页面内容被挡住了，试过加 padding 但不太稳定，有没有标准做法？

比如我在 AppBar 下面放了个 <div>，即使给它加 paddingTop: 64，在不同设备上还是会被盖住。

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

function Header() {
  return (
    <AppBar position="fixed">
      <Toolbar>
        <Typography variant="h6">My App</Typography>
      </Toolbar>
    </AppBar>
  );
}

我来解答赞 10 收藏

反馈

2 条解答

司徒振杰 Lv1

在 Material-UI 里处理固定 AppBar 的遮挡问题，最干净的做法是用 Box 组件来包裹页面内容，并设置适当的上边距。这样更清晰，也更符合 Material Design 的设计理念。

首先把页面结构稍微调整下，让内容部分由 Box 包裹：

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



function PageLayout() {

  return (

    <>

      

        

          My App

        

      

      

        {/* 页面内容放这里 */}

      

    

  );

}

这里的 mt: 8 是 Material-UI 的主题间距系统，相当于 64px，默认 AppBar 高度正好是这个值。这样做有个好处：当你的主题 spacing 发生变化时，内容的上边距会自动调整，不用再手动去调 paddingTop。

其实以前我也试过直接给 div 加 padding，确实不太稳定，尤其是在不同屏幕尺寸和组件样式变化时。用 Box 组件不仅简洁，而且更符合 React 和 MUI 的设计思路。

2026-03-29 19:14

开发者诗诗 Lv1

这个问题很简单，MUI 固定定位的 AppBar 会脱离文档流，下面的内容自然就被盖住了。

最直接的办法是在 AppBar 下面加一个占位的 Toolbar：

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



function Header() {

  return (

    <AppBar position="fixed">

      <Toolbar>

        <Typography variant="h6">My App</Typography>

      </Toolbar>

    </AppBar>

  );

}



export default function Layout({ children }) {

  return (

    <>

      <Header />

      <Toolbar /> {/* 占位用的，实际开发中这个可以放在 Header 组件内部 */}

      <Box>{children}</Box>

    </>

  );

}

为什么推荐这么写？因为 Toolbar 默认高度就是 64px（移动端可能更小），用它当占位符最稳，不需要自己算数值。

如果你想更精确控制，可以用主题里的 toolbar 高度：

import { useTheme } from '@mui/material/styles';



function Content() {

  const theme = useTheme();

  return (

    <Box sx={{ mt: ${theme.mixins.toolbar.minHeight}px }}>

      你的内容

    </Box>

  );

}

这样在不同设备上都能自动适配。你之前 paddingTop: 64 不稳定大概率是因为没考虑响应式，直接用 Toolbar 占位或者用主题变量是最省心的做法。

2026-03-17 23:01