xs={false} 或 xs={0} 在 MUI React 中不起作用

Question

我这里有视频和登录页面模板的代码。但是，正如您所看到的，它不起作用？它转到登录页面的顶部。当我使用图片时，它按照说明消失了。如何强制 xs={} 设置？

<Grid container component='main' className={classes.root}>
      <CssBaseline />
      <Grid item xs={false} sm={4} md={9}>
        <BackgroundVideo />
      </Grid>
      <Grid
        item
        xs={12}
        sm={8}
        md={3}
        component={Paper}
        elevation={6}
        square
        className={classes.formBackground}
      >

Answer 1

xs={false}意味着没有断点，因此在该断点处不会更改大小。false是所有断点的默认值。

您可以Grid通过用组件包装项目来隐藏项目Box。

<Box
  component={Grid}
  item
  sm={4} 
  md={9}
  display={{ xs: "none", sm: "block" }}
>
  <BackgroundVideo />
</Box>