MUI：如何防止网格项目进入下一行？

Question

我Grid在 ReactJs 中使用 MUI 结构来显示 5 列，如下所示：

在较小的屏幕中，列会移动到下一行。但在较小的屏幕中，我还希望所有列仅显示在一行中，并且我可以通过水平滚动来访问其他列。

<Grid
  container
  spacing={2}
  style={{
    maxHeight: "100vh",
    overflowY: "auto",
    overflowX: "hidden",
    height: "440px",
    overflow: "auto",
  }}
>
  <Grid item xs={2.1}>
    {cards.map((card) => <Card props={card} /> )}
  </Grid>
</Grid>

Answer 1

因为在引擎盖下Grid 使用了flexbox 。您只需在容器中设置该wrap值即可，您可以在此处查看组件的完整 API 。nowrapGridGrid

<Grid
  container
  wrap="nowrap" // --> add this line to disable wrap
  sx={{ overflow: "auto" }} // --> add scrollbar when the content inside is overflowed
  spacing={8}
>
  {...}
</Grid>

现场演示