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

Question

在反应中使用 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>

标签： reactjsmaterial-ui

Answer 1

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

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

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