Material UI v5的Grid组件item的xs断点属性不生效如何解决

核心问题点 #

• 自定义样式冲突：你在Grid容器上添加的'& .MuiGrid-root':{flexGrow: '1'}是导致断点失效的直接原因。MUI v5 Grid的响应式宽度规则依赖内置的flex-basis、max-width属性控制，给所有Grid节点强制设置flexGrow: 1后，子项会无视宽度配置自动拉伸占满剩余空间，直接破坏了断点布局逻辑。而且这个选择器会无差别命中所有Grid后代节点，包括Grid容器本身和嵌套Grid，非常容易引发样式冲突。
• 冗余写法问题：第一个Grid item重复写了两次item属性，属于无效冗余代码，虽然不会直接抛错，但不符合组件写法规范。
• 额外排查点：如果删除冲突样式后本地表现和在线沙箱仍不一致，执行npm ls @mui/system检查依赖版本，@mui/system和@mui/material版本不匹配会导致sx样式注入优先级异常，将两个包版本对齐到5.8.2即可。

修复后代码 #

MUI Grid组件已经内置了item所需的flex相关默认样式，不需要手动批量添加flexGrow配置，删除冲突的自定义样式即可恢复正常：

<Paper sx={{ padding: 5, height: '100%' }}>
  <Grid container spacing={4} sx={{ border: '1px solid red' }}>
    <Grid item xs={12} sm={12} md={12} lg={6} xl={4} sx={{ border: '1px solid blue' }}>
      grid 1
    </Grid>
    <Grid item xs={2} sx={{ border: '1px solid blue' }}>
      grid 2
    </Grid>
    <Grid item xs={6} sx={{ border: '1px solid blue' }}>
      grid 3
    </Grid>
  </Grid>
</Paper>

注意事项 #

如果确实有个别Grid item需要调整flexGrow属性，不要用后代选择器批量覆盖全局样式，单独给对应Grid item的sx属性添加配置即可，避免影响其他Grid节点的内置布局逻辑。

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