带有材质ui的重叠网格

Question

我正在尝试将两个网格项与Material UI重叠，但是如果有人可以将我指向正确的方向，则我尝试了不同的方法后就失败了。

因此，基本上是尝试将项目2 居中，并将 1/3 的项目1 放入项目2 strong>。

  <Grid
    container
    direction="column"
    justify="flex-start"
    alignItems="flex-start"
    style={{ width: "100%", height: "100%", background: "pink" }}
  >
    <Grid
      item
      container
      xs={4}
      style={{ width: "100%", height: "100%", background: "blue" }}
    >
      1
    </Grid>

    <Grid
      item
      xs={6}
      style={{ width: "100%", height: "100%", background: "red" }}
    >
      <Grid
        item
        xs={2}
        justify="center"
        style={{ width: "10", background: "grey" }}
      >
        <h1>2/2</h1>
      </Grid>
    </Grid>
    <Grid
      item
      xs={4}
      style={{ width: "100%", height: "100%", background: "brown" }}
    >
      3
    </Grid>
  </Grid>
</div>

Answer 1

首先你的第二个网格是错误的，它不能同时是一个 container 和一个 item。

其次，您应该检查此 Grid system 和此 Breakpoint system，这将使您了解必须传递给网格（父级和子级）的道具以获得所需的布局。

基本上是您尝试这样做的地方：

<Grid container justify="center" alignItems="center">
    <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
        <Typography>Item 2</Typography>
    </Grid>
    <Grid container direction="column" justify="center" alignItems="center">
        <Grid item xs={4} md={4} lg={4} xl={4} sm={}>
            <Typography>Item 1</Typography>
        </Grid>
    </Grid>
</Grid>

希望对你有帮助！