Material-UI AppBar固定后内容被遮挡怎么办？

玉丹提问于 2026-02-15 09:20:44 阅读 1,197

组件

我在用Material-UI的AppBar做固定顶部栏时，设置了position=”fixed”，但下方内容被导航栏遮住了。之前试过给App容器加margin-top:64px，虽然初始显示正常了，但滚动页面时内容又会移出可视区域…


import { AppBar, Toolbar } from '@material-ui/core';

function App() {
  return (
    <div>
      <AppBar position="fixed">
        <Toolbar>我的导航栏</Toolbar>
      </AppBar>
      <div style={{ marginTop: 64 }}>这里的内容会被遮挡</div>
    </div>
  );
}

现在页面滚动时，顶部内容还是会被AppBar挡住，而且出现横向滚动条。是不是应该用其他方式控制间距？或者需要配合react的useRef来检测滚动位置？

我来解答赞 2 收藏

反馈

1 条解答

___小菊 Lv1

我之前踩过这个坑，Material-UI的AppBar固定定位后确实会遮挡内容，单纯加marginTop并不是最佳解决方案。推荐的做法是用CSS的padding-top来撑开页面内容区域，并且要动态适配AppBar的高度。

具体来说，Material-UI提供了一个theme.mixins.toolbar的样式工具，它能自动计算出Toolbar的高度。你可以这样改：

import { AppBar, Toolbar, makeStyles } from '@material-ui/core';



const useStyles = makeStyles(theme => ({

  offset: theme.mixins.toolbar,

}));



function App() {

  const classes = useStyles();

  return (

    <div>

      <AppBar position="fixed">

        <Toolbar>我的导航栏</Toolbar>

      </AppBar>

      <div className={classes.offset} />

      <div>这里的内容不会再被遮挡了</div>

    </div>

  );

}

这样做有几个好处：首先theme.mixins.toolbar会根据当前主题自动计算高度，比写死64px更灵活；其次用padding撑开内容区域不会影响布局，滚动时也不会出现异常。

至于你说的横向滚动条问题，大概率是因为AppBar设置了固定定位后，宽度计算出了问题。记得给外层容器加上box-sizing:border-box样式，可以避免这种尴尬情况。

我之前试过用useRef监听滚动位置来做偏移，但后来发现完全是多此一举，Material-UI已经提供了更优雅的解决方案。相信我，用theme.mixins.toolbar这种方式最省心。

2026-02-15 09:22