如何移除Material UI容器组件外部的空白，实现组件全宽展示？

问题示例：

空白产生的核心原因 #

你遇到的无法消除的空白，通常由以下几个默认配置导致：

• MUI Container组件默认开启了最大宽度限制，内容居中排布后两侧会产生空白
• 组件默认自带左右内边距（Gutters）
• 浏览器默认给body节点设置的8px外边距未被清除，导致页面整体存在外层空白

方案1：使用组件原生属性调整（推荐） #

无需额外编写CSS，直接通过组件自带属性即可实现全屏宽度：

import Container from '@mui/material/Container';

function Page() {
  return (
    {/* disableGutters：去掉默认左右内边距 */}
    {/* maxWidth={false}：取消最大宽度限制，占满父容器宽度 */}
    <Container disableGutters maxWidth={false}>
      {/* 页面内容 */}
    </Container>
  )
}

该写法兼容MUI v4和v5所有版本。

方案2：自定义CSS强制覆盖 #

如果需要通过样式规则覆盖默认配置，可选择以下任意一种方式：

用sx属性内联设置（MUI v5适用） #

<Container 
  sx={{
    margin: 0,
    padding: 0,
    maxWidth: '100% !important',
    width: '100%'
  }}
>
  页面内容
</Container>

全局样式覆盖 #

在全局CSS文件中添加以下规则：

/* 先清除根节点默认边距 */
body, #root {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 覆盖Container默认样式 */
.MuiContainer-root {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

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