失败的道具类型：必须在容器上使用 Grid 的道具 justify

【问题标题】：Failed prop type: The prop justify of Grid must be used on container失败的道具类型：必须在容器上使用 Grid 的道具 justify
【发布时间】：2021-07-09 07:32:16
【问题描述】：

在 react 中使用 Material-UI 时出现错误

<Grid container justify="center">
  <Box className={classes.box}>
    <Grid item className={classes.item1}>
      <Typography variant="h5" className={classes.loginTitle}>
        Login
      </Typography>
      <Typography variant="body1" className={classes.subTitle}>
        to continue to Program
      </Typography>
    </Grid>

    {renderForm(window.location.pathname)}

    <Grid
      item
      className={classes.component}
      alignItems="center"
      justify="space-between"
    >
      <Typography
        variant="body2"
        color="primary"
        className={classes.createAccountLink}
      >
        <Link
          style={{ cursor: "pointer" }}
          onClick={(e) => e.preventDefault()}
        >
          Create account
        </Link>
      </Typography>

      <Button
        variant="contained"
        color="primary"
        disableElevation
        className={classes.btn}
      >
        Login
      </Button>
    </Grid>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Grid 使用 CSS flexbox 进行布局。您不能在 Grid 项目中设置 alignItems，它必须放在 Grid 容器中。请参阅this 交互式示例以了解如何在中使用alignItems Grid.

// invalid
<Grid container>
  <Grid item alignItems="center">
  </Grid>
</Grid>

// valid
<Grid container alignItems="center">
  <Grid item>
  </Grid>
</Grid>

【讨论】：