React使用MaterialUI Grid时移动端元素超出容器/屏幕问题求助

以下是经过验证的可落地修复步骤：

• 确认所有Grid节点的属性正确：外层容器必须加container属性，子节点必须加item属性，遗漏属性是最常见的布局异常原因
• 给外层Grid容器添加disableGutters属性，取消默认的左右内边距，避免边距叠加导致总宽度超出视口，参考示例：

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

// 外层容器配置
<Grid container spacing={2} disableGutters>
  {/* 子项配置，xs断点占满整行，小屏以上按需分配宽度，总占比不超过12 */}
  <Grid item xs={12} sm={6} md={4}>
    你的内容块1
  </Grid>
  <Grid item xs={12} sm={6} md={4}>
    你的内容块2
  </Grid>
  <Grid item xs={12} sm={12} md={4}>
    你的内容块3
  </Grid>
</Grid>

• 检查Grid内部元素：如果存在超长文本、固定宽度图片/容器，给对应元素添加限制样式：

/* 超长文本自动换行 */
.text-content {
  word-break: break-all;
  overflow: hidden;
}
/* 图片响应式适配 */
.grid-content img {
  max-width: 100%;
  height: auto;
}

• 如果使用的是MUI v5及以上版本，建议直接替换为官方新推出的Grid2组件，该组件优化了布局逻辑，默认规避了大量溢出类问题。

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