MUI Grid嵌套容器出现意外水平拉伸的原因咨询

问题现象 #

正常嵌套（无拉伸） #

当嵌套Grid容器被单个Grid item包裹时，布局符合预期，容器贴合内容，无额外空白：

import Grid from '@mui/material/GridLegacy';

<Grid container>
   <Grid item> {/* 外层包裹的Grid item */}
      <Grid container bgcolor={'red'}> {/* 嵌套的容器 */}
         <Grid item>Item around</Grid>
      </Grid>
   </Grid>
</Grid>

效果：红色容器仅包裹"Item around"文本，无多余拉伸。

多层嵌套（出现右侧空白） #

在嵌套容器内再添加一个同时作为item和container的元素时，外层红色容器会出现右侧额外空白，被水平拉伸：

<Grid container>
    <Grid item>
       <Grid container bgcolor={'red'}>
          <Grid item>Item around</Grid>
          <Grid item container bgcolor={'blue'}>
              <Grid item>Item nested</Grid>
          </Grid>
      </Grid>
   </Grid>
</Grid>

效果：红色容器右侧出现空白，宽度远超内容宽度；预期效果应为红色容器贴合内部两个元素的总宽度，无多余空白。

原因解析 #

问题根源在于MUI GridLegacy的样式规则叠加：

1. Grid container的默认样式：container组件默认设置width: 100%，即宽度撑满父元素的可用空间。
2. item + container的样式冲突：当一个元素同时标记为item和container时，它会同时继承两类组件的样式：
   • 作为item，默认flex: 0 1 auto（宽度自适应内容，可收缩）；
   • 作为container，强制width: 100%（宽度撑满父容器）。
3. flex布局的计算逻辑：外层红色container是flex容器，内部两个子元素分别是：
   • 第一个普通item：宽度自适应文本；
   • 第二个item + container：因为width:100%，会试图撑满红色容器的宽度。
     这导致红色容器的宽度被第二个子元素的100%宽度强制拉伸，形成循环计算，最终出现右侧多余空白。

解决方法 #

你已经发现的在最内层容器外额外包裹一个Grid item是可行的，本质是把container从item的样式中分离出来：

<Grid container>
    <Grid item>
       <Grid container bgcolor={'red'}>
          <Grid item>Item around</Grid>
          <Grid item> {/* 新增的包裹item */}
              <Grid container bgcolor={'blue'}>
                  <Grid item>Item nested</Grid>
              </Grid>
          </Grid>
      </Grid>
   </Grid>
</Grid>

另外也可以给那个item + container添加xs="auto"属性，覆盖width:100%的默认规则，让它宽度自适应：

<Grid item container xs="auto" bgcolor={'blue'}>
    <Grid item>Item nested</Grid>
</Grid>

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