如何使用 MUI Grid 在 ReactJS 上进行水平滚动

Question

我希望容器方向为 md 尺寸屏幕上方的“行”和 md 尺寸屏幕下方的“列”？我该如何实施？

我正在尝试使用 MUI 网格滚动到地平线。

<Grid
    container
    sx={{ flex: 1, flexDirection: { xs: "column", md: "row" }, overflowX: "auto" }}
  >
    {Array.from(Array(11)).map((_, index) => (
      <Grid item xs={4} sm={6} key={index}>
        <Card key={index} {...featuresData[0]} />
      </Grid>
    ))}
  </Grid>

但它可能不起作用。

Answer 1

这适合您的应用吗？基本上在网格项上设置

xs={12}

，使其始终是一列，直到遇到

sm

断点等等？

例如：

 return (
    <Grid container spacing={3}>
      {Array.from(Array(11)).map((_, index) => (
        <Grid xs={12} sm={6} md={4} lg={3} key={index} item>
          <MediaCard />
        </Grid>
      ))}
    </Grid>
  );

我在 codesandbox 上放了一个示例供您查看。