MUI框架下Section内Box组件无法占满父容器全宽如何解决

问题复现 #

React项目使用MUI开发时，结构为带section-filters类名的Section组件内嵌带sticky-filters类名的Box吸顶筛选栏，要求Box撑满Section全宽，多次调整无效：

• 给两个元素设置width: 100%、调整内外边距无效果
• 给Box设置固定宽度1000px，仅右侧延伸，始终无法撑满左侧余量

问题代码 #

外部CSS #

.section-filters {
  width: 100%;
  position: relative;
}
.sticky-filters {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
  z-index: 5;
}

初始JSX #

<Section className="section-filters">
  <Box className="sticky-filters" mb="10">
    <Filters />
  </Box>
  <ProjectList projects={filtered} />
</Section>

尝试的无效修改（固定宽度写法） #

<Section className="section-filters">
  <Box sx={{
      width:1000,
      height:100
     }}
    className="sticky-filters" mb="10">
    <Filters />
  </Box>
  <ProjectList projects={filtered} />
</Section>

该写法本身存在问题：原代码中sx缺少赋值等号、height拼写为heigh，且固定宽度本身就无法适配不同屏幕尺寸。

根本原因 #

MUI的Section/Container这类布局组件默认自带三个限制：

• 默认设置了对应响应式断点的maxWidth，不会自动占满父级100%宽度
• 默认带左右24px的gutters内边距
• MUI内置样式权重高于外部引入的自定义CSS类，写在外部CSS文件里的width属性被默认样式覆盖，所以设置100%宽度不生效。设置固定宽度时元素默认从内容区左侧开始渲染，所以只会向右延伸，左侧留空。

修复方案 #

优先用MUI自带的属性和sx配置样式，不要靠外部CSS强覆写，两种常见场景对应写法：

场景1：整个Section区域全宽，无默认边距 #

给Section加disableGutters去掉默认内边距，配置sx突破最大宽度限制即可：

<Section
  className="section-filters"
  disableGutters
  sx={{ maxWidth: "100%" }}
>
  <Box className="sticky-filters" mb="10" sx={{ width: "100%" }}>
    <Filters />
  </Box>
  <ProjectList projects={filtered} />
</Section>

场景2：仅吸顶筛选栏通栏，下方列表保留默认边距 #

给Box加负边距抵消Section的默认内边距，同时给Box自身加内边距避免内容贴边：

<Section className="section-filters">
  <Box
    className="sticky-filters"
    mb="10"
    sx={{
      width: "calc(100% + 48px)",
      mx: "-24px",
      px: 3,
      position: "sticky",
      top: "60px",
      zIndex: 5,
      bgcolor: "background.paper" // 加背景色避免滚动时下方内容透上来
    }}
  >
    <Filters />
  </Box>
  <ProjectList projects={filtered} />
</Section>

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