material-ui - Typography 和 Grid inn Material-UI 的高度问题

Question

我在 Grid 中使用排版时遇到高度问题，所以基本上，最后一项和第二项之间有一个意想不到的空间。

这是我的代码

    <Grid container direction="column" spacing={2}>
      <Grid item>
        <Typography variant="h1">Test</Typography>
      </Grid>
      <Grid item>
        <Grid container alignItems="center" style={{ border: '1px solid red' }}>
          <Grid item xs={2}>
            <Typography variant="body1">Testing Column 1</Typography>
          </Grid>
          <Grid item xs={4}>
            <Typography variant="body1">Testing Column 1</Typography>
          </Grid>
          <Grid item xs={6}>
            <Typography variant="body1">Testing Column 1</Typography>
          </Grid>
        </Grid>
      </Grid>
      <Grid item>Issue Here</Grid>
    </Grid>

标签： material-ui

Answer 1

您的最后一个Grid在父母之外Grid Group，将其带入小组将解决问题

<Grid container direction="column" spacing={2}>
  <Grid item>
    <Typography variant="h1">Test</Typography>
  </Grid>
  <Grid item>
    <Grid container alignItems="center" style={{ border: "1px solid red" }}>
      <Grid item xs={2}>
        <Typography variant="body1">Testing Column 1</Typography>
      </Grid>
      <Grid item xs={4}>
        <Typography variant="body1">Testing Column 1</Typography>
      </Grid>
      <Grid item xs={6}>
        <Typography variant="body1">Testing Column 1</Typography>
      </Grid>
      <Grid item>Issue Here</Grid> //<-- Move it inside parent Grid
    </Grid>
  </Grid>
</Grid>;

工作示例：