Material UI无法修改muicontainer的maxWidthLG导致div无法占满全宽如何解决

• 方法1：直接使用Container组件内置props调整
  无需手动覆盖CSS，直接给Container组件传递以下props即可移除默认宽度限制和左右内边距：

<Container maxWidth={false} disableGutters>
  {/* 你的页面内容 */}
</Container>

说明：maxWidth={false}会移除所有断点下的默认max-width限制（包含你提到的maxWidthLG规则），disableGutters会去掉Container默认的左右内边距，实现完全铺满页面宽度。

• 方法2：全局修改Container默认配置
  如果要全局生效所有Container的全宽样式，可在主题配置中修改默认属性：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiContainer: {
      defaultProps: {
        maxWidth: false,
        disableGutters: true
      },
      // 也可以直接覆盖maxWidthLG的规则
      styleOverrides: {
        maxWidthLg: {
          maxWidth: '100% !important'
        }
      }
    }
  }
});

// 把ThemeProvider套在应用根组件外层即可生效

• 方法3：局部样式强制覆盖
  如果你只需要给特定Container修改样式，可以用sx属性或者自定义CSS类：
  sx属性写法：

<Container sx={{ maxWidth: '100% !important', px: 0 }}>
  {/* 内容 */}
</Container>

自定义CSS类写法：

.custom-container .MuiContainer-root {
  max-width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

<div className="custom-container">
  <Container>
    {/* 内容 */}
  </Container>
</div>

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