MUI Grid问题：已定义列属性但元素宽度不随屏幕尺寸变化

问题原因 #

你的代码存在两个关键错误：

1. item 属性需绑定在 Grid 组件上，而非 Paper 组件——MUI Grid 布局系统中，container 作为容器，item 是容器内的布局子项，只有 Grid 组件的 item 属性才能触发响应式布局逻辑。
2. 给每个 Paper 额外套了一层无属性的 Grid，这层空 Grid 未参与布局分配，反而阻断了外层 container 对内部子项的布局控制。

修正后的代码 #

class App extends Component {
  render() {
    return (
      <div>
        <Grid container>
          <Grid item xs={12} sm={6} md={3}>
            <Paper>1</Paper>
          </Grid>
          <Grid item xs={12} sm={6} md={3}>
            <Paper>2</Paper>
          </Grid>
          <Grid item xs={12} sm={6} md={3}>
            <Paper>3</Paper>
          </Grid>
          <Grid item xs={12} sm={6} md={3}>
            <Paper>4</Paper>
          </Grid>
        </Grid>
      </div>
    );
  }
}

效果说明 #

修正后，Grid 子项会根据屏幕尺寸自动适配宽度：

• 移动端（xs 断点）：每个子项占满 12 列，垂直排列
• 平板（sm 断点）：每个子项占 6 列，一行显示 2 个
• 桌面端（md 及以上断点）：每个子项占 3 列，一行显示 4 个，完全铺满屏幕宽度

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