如何在ReactJS中使用MUI Grid实现响应式布局及水平滚动？

问题分析 #

你的代码无法实现水平滚动的核心原因是：在md及以上尺寸时，MUI Grid容器默认开启flex-wrap: wrap，导致子项自动换行而非溢出触发横向滚动；同时子项会自动收缩以适应容器宽度，无法满足滚动触发条件。

修复后代码 #

<Grid 
  container 
  sx={{ 
    flex: 1,
    flexDirection: { xs: "column", md: "row" },
    flexWrap: { xs: "wrap", md: "nowrap" }, // md及以上禁止子项换行
    overflowX: { md: "auto", xs: "visible" }, // md及以上开启横向滚动
    gap: 2 // 可选：添加子项间距优化视觉效果
  }} 
>
  {Array.from(Array(11)).map((_, index) => (
    <Grid 
      item 
      xs={4} 
      sm={6} 
      md={3} // md及以上设置子项宽度占比
      sx={{ flexShrink: 0 }} // 禁止子项收缩，确保宽度足够触发滚动
      key={index}
    >
      <Card key={index} {...featuresData[0]} />
    </Grid>
  ))}
</Grid>

关键修改说明 #

• flexWrap: { xs: "wrap", md: "nowrap" }: 在md及以上尺寸禁用子项换行，强制子项在单行排列，超出容器宽度时触发横向滚动。
• flexShrink: 0: 给Grid子项添加该样式，避免子项自动收缩以适应容器宽度，保证子项宽度符合设置的md={3}（即容器宽度的25%），多个子项累加后超出容器宽度从而触发滚动。
• overflowX: { md: "auto", xs: "visible" }: 仅在md及以上尺寸开启横向滚动，小屏模式下保持正常纵向布局无横向滚动。

额外优化建议 #

• 可给容器添加py: 1（上下内边距），避免滚动条与子项紧贴。
• 如果需要更精确的子项宽度，可直接用固定宽度替代Grid断点占比，比如sx={{ width: { md: "200px" } }}。

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