使用 material-UI Grid 组件，如何将一个表嵌套在另一个表中？

Question

我正在创建一个 React 16.13.0 应用程序并尝试使用 material-ui Grid 组件。我在网格中嵌套网格时遇到问题。我想嵌套这张表

          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up window {mission.pickUpLocation}</Grid>
          </Grid>

在更大的表格中。在上面，我希望“图标”单元格和另一个单元格位于同一行。但是，当我把它放在更大的桌子上时

<Grid container spacing={1} alignItems="center">
  <React.Fragment key={`content-item-${mission.id}`}>
    <Grid container direction="column">
      <Grid item container spacing={2}>
        <Grid item xs={1}>
          PICK Up
        </Grid>
        <Grid container item xs={1}>
          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up window {mission.pickUpLocation}</Grid>
          </Grid>
          <Grid container item spacing={2}>
            <Grid item xs={1}>Icon</Grid>
            <Grid item xs={1}>mission pick up location {mission.pickUpLocation}</Grid>
          </Grid>
        </Grid>
      </Grid>
    </Grid>

图标单元格出现在单元格顶部，并带有文本“任务拾取窗口”。

构建网格的正确方法是什么？

Answer 1

Grid 不完全是一个表格，但如果你想嵌套网格，你可以在网格项内的网格容器上嵌套：

  <Grid container spacing={3}>
    <Grid item xs={12} sm={6}>
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
    <Grid item xs={12} sm={6}>
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
    <Grid item xs={12} sm={6}>
      This grid is nested:
      <Grid container>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
      </Grid>
    </Grid>
    <Grid item xs={12} sm={6}>
      Here there is no nested grid:
      <Paper className={classes.paper}>xs=12 sm=6</Paper>
    </Grid>
  </Grid>

你可以在这里看到它的实际效果：https://codesandbox.io/s/material-nested-grid-9s7lq?file=/demo.js

在您的代码中，您将一个 Grid-Item 放在另一个 Grid-Item 中（您不应该这样做），并将一个 Grid-Container 放在另一个 Grid-Container 中（也不好）。

一般来说这是你需要记住的：

• 网格容器是网格项的包装器。
• 如果您想拥有一个嵌套网格 - 将一个新的网格容器放入一个网格项中，然后像上面一样使用它。