如何让Material UI的AppBar突破React项目中Container的宽度限制

我将React应用包裹在maxWidth={false}的MUI Container组件内，内部的AppBar需要占满整个屏幕宽度，但Container的paddingX属性导致它无法延伸至视口两端。期望带有extend-width类的元素能铺满视口，效果与Container外的AppBar一致。

以下是几种可行的解决方案：

方法一：修正CSS偏移逻辑 #

原CSS的宽度和偏移计算存在误差，替换为以下样式即可精准抵消Container的内边距，让元素撑满视口：

h1,
p {
  font-family: Lato;
}

main.MuiContainer-root {
  .extend-width {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
  }
}

核心思路是用width:100vw直接取视口宽度，再通过left:50%和transform:translateX(-50%)实现精准居中，完全忽略Container的内边距限制。

方法二：使用MUI sx属性直接设置（无需额外CSS） #

更符合MUI的使用习惯，直接在AppBar组件内通过sx属性覆盖样式：

import * as React from 'react';
import {
  Container,
  AppBar,
  Box,
  Toolbar,
  Typography,
  Button,
} from '@mui/material';
import './style.scss';

export default function App() {
  return (
    <div>
      <Container maxWidth={false} component="main">
        <h1>Hello StackBlitz!</h1>
        <p>Start editing to see some magic happen :)</p>
        <Box sx={{ flexGrow: 1 }}>
          <AppBar 
            position="static"
            sx={{
              width: '100vw',
              position: 'relative',
              left: '50%',
              transform: 'translateX(-50%)',
              marginX: 0,
            }}
          >
            <Toolbar>
              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                News
              </Typography>
              <Button color="inherit">Login</Button>
            </Toolbar>
          </AppBar>
        </Box>
      </Container>
    </div>
  );
}

方法三：调整组件结构（推荐方案） #

如果业务允许，直接将AppBar移出Container组件，这样AppBar天然就能撑满视口宽度，其他内容保留在Container内，完全避免样式hack：

import * as React from 'react';
import {
  Container,
  AppBar,
  Box,
  Toolbar,
  Typography,
  Button,
} from '@mui/material';
import './style.scss';

export default function App() {
  return (
    <div>
      {/* AppBar移到Container外，天然撑满宽度 */}
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </Box>
      <Container maxWidth={false} component="main">
        <h1>Hello StackBlitz!</h1>
        <p>Start editing to see some magic happen :)</p>
      </Container>
    </div>
  );
}

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