xs={false} or xs={0} does not work in MUI React

user_12996287 0
Viewed 2170

I have a code here for the video and login page template. However, as you can see it does not work? It goes to the top of the login page. When I was using a picture, it disappeared as stated. How can I force xs={} setting?

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

enter image description here

material-ui reactjs
2 Answers

xs={false} means that there is no breakpoint, so it doesn't change sizing at this breakpoint. false is a default value for all breakpoints.

You can hide Grid item by wrapping it with a Box component.

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

As the answer from Nikolai Kiselev mentioned, values of false or 0 will not hide the grid item.

The way I've been getting around this is by wrapping my grid items in a Hidden component like so (using your example as a base):

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

Make sure to note that if you go with this approach, whatever value you pass in the breakpoints where the component will be hidden (xs in this example) will be ignored, since the component will be hidden.

user_159458740
Related