MUI Material中App Bar无法填满页面顶部的问题如何解决

问题场景 #

使用MUI Material进行前端开发时，AppBar组件在页面顶部、左侧、右侧均存在空隙，无法完全贴合视口边缘，手动通过自定义class给AppBar设置margin: 0样式未生效，效果如下：

相关代码路径为components/AppBar/index.js，原始实现代码如下：

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

const useStyles = makeStyles({
  root: {
    backgroundColor: "#130f40",
    margin: 0
  }
});

export default function ButtonAppBar() {
  const classes = useStyles();

  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" className={classes.root}>
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

问题原因 #

你看到的空隙不是AppBar组件自带的外边距，是浏览器默认给<body>标签添加的8px外边距，之前给AppBar设置margin: 0的样式作用范围不包含body标签，自然无法消除空隙。
另外你使用的makeStyles是MUI v4版本的遗留样式API，在MUI v5中样式优先级低于组件默认样式和sx属性，后续开发建议优先使用官方推荐的sx或styledAPI编写自定义样式，避免样式覆盖失效问题。

修复方案 #

1. 清除浏览器默认的body边距，两种方案选其一即可：
   • 方案一：在项目全局CSS文件中添加重置样式

     body {
       margin: 0;
       padding: 0;
     }
     

   • 方案二：引入MUI官方提供的CssBaseline组件，它会自动完成全局样式重置（包含清除body边距、统一默认字体、修正不同浏览器默认样式差异等基础适配），在应用根组件中引入即可：

     import CssBaseline from '@mui/material/CssBaseline';
     
     function App() {
       return (
         <>
           <CssBaseline />
           {/* 页面、路由等其他业务组件 */}
         </>
       )
     }
     

2. 优化AppBar组件样式写法，替换遗留的makeStyles为sx属性，修改后的组件代码如下：

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

export default function ButtonAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar 
        position="static" 
        sx={{ backgroundColor: "#130f40" }}
      >
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

修改完成后AppBar即可完全贴合页面顶部和左右边缘。

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