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

Question

I got the error while using Material-UI in react

<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>

Answer 1

Grid uses CSS flexbox for layout. You cannot set alignItems in a Grid item, it must be placed in a Grid container. See this interactive example to know how to use alignItems in Grid .

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

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