失敗的道具類型：必須在容器上使用 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>

Answer 1

Grid使用 CSS flexbox 進行布局。 您不能在Grid項目中設置alignItems ，它必須放置在Grid容器中。 請參閱此交互式示例以了解如何在Grid中使用alignItems 。

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

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