Material UI does not hide when using display

Question

I want to use Material UI Grid and I wanted to hide one item Grid if the screen is small, so I found something called Display. My code looks like this:

function CRUDView() {
  return (
    <Grid
      container
      spacing={1}
      direction="row"
      justify="center"
      alignItems="center"
    >
      <Grid item xs={12} lg={6}>
        <span>XX</span>
      </Grid>
      <Grid item xs={6} display={{ xs: "none", lg: "block" }} >
        <span>YY</span>
      </Grid>
    </Grid>
  );
}

I don´t uderstand why it doesn't work (the text YY still appears) . Can't I use display with Grid maybe? If yes then why?

Try this for mobile only - ` ` – Manohar Reddy Poreddy Mar 08 '22 at 08:01 — Manohar Reddy Poreddy, Mar 08 '22 at 08:01

score 21 · Accepted Answer · answered Oct 01 '19 at 21:03

The style functions are not automatically supported by the Grid component.

The easiest way to leverage the style functions is to use the Box component. The Box component makes all of the style functions (such as display) available. The Box component has a component prop (which defaults to div) to support using Box to add style functions to another component.

The Grid component similarly has a component prop, so you can either have a Grid that delegates its rendering to a Box or a Box that delegates to a Grid.

The example below (based on your code) shows both ways of using Box and Grid together.

import React from "react";
import ReactDOM from "react-dom";

import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  gridItem: {
    border: "1px solid red"
  }
});

function App() {
  const classes = useStyles();
  return (
    <Grid
      container
      spacing={1}
      direction="row"
      justify="center"
      alignItems="center"
    >
      <Grid className={classes.gridItem} item xs={12} lg={6}>
        <span>XX</span>
      </Grid>
      <Box
        component={Grid}
        className={classes.gridItem}
        item
        xs={3}
        display={{ xs: "none", lg: "block" }}
      >
        <span>YY</span>
      </Box>
      <Grid
        component={Box}
        className={classes.gridItem}
        item
        xs={3}
        display={{ xs: "none", lg: "block" }}
      >
        <span>ZZ</span>
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Krzysztof Cieslinski · Answer 2 · 2022-10-19T07:21:16.787

14

For MUI v5:

In MUI v5 the <Hidden> tag got deprecated in favor for sx.display property withing <Grid> and <Box> tags - display documentation.

For MUI v4 and earlier:

MUI exposes a <Hidden> component to achieve this. Just wrap component you want to hide for specific screen size:

      <Hidden xsDown >
          <p>Hide me on XS view port width.</p>
      </Hidden>

You can find more examples in the hidden documentation.

edited Oct 19 '22 at 07:21

answered Jun 29 '20 at 16:08

Krzysztof Cieslinski

894
9
17

1

This is deprecated in newer versions of Material UI – Chukwuemeka Maduekwe Oct 18 '22 at 06:38

NearHuscarl · Answer 3 · 2021-10-14T13:35:38.250

4

In MUI v5, you can change the display value directly on Grid without having to use Box anymore:

<Grid
  item
  xs={3}
  sx={{
    display: { xs: "none", lg: "block" }
  }}
>
  <span>YY</span>
</Grid>

edited Oct 14 '21 at 13:35

answered Oct 08 '21 at 09:25

NearHuscarl

66,950
18
261
230

Travis James · Answer 4 · 2019-10-01T18:24:05.490

-1

Grid Items just setup your layout.

They don't actually display anything. The MUI display option is for hiding specific elements.

Try this:

function CRUDView() {
  return (
    <Grid
      container
      spacing={1}
      direction="row"
      justify="center"
      alignItems="center"
    >
      <Grid item xs={12} lg={6}>
        <span>XX</span>
      </Grid>
      //removed from the below Grid Item
      <Grid item xs={12} lg={6}>
        <span display={{ xs: "none", lg: "block" }}>YY</span>
      </Grid>
    </Grid>
  );
}

That will hide the individual span element even though the grid is still there.

edited Oct 01 '19 at 18:24

answered Oct 01 '19 at 18:14

Travis James

1,879
9
22

When I delete `xs={6}` the Grid disappears but what is inside does not, so I still can see `YY` text – user0810 Oct 01 '19 at 18:19
Sorry I misunderstood your question, I edited my answer to reflect what I think you are trying to do. – Travis James Oct 01 '19 at 18:24
Thank you for your answer, unfortunatelly it doesn´t work either. – user0810 Oct 01 '19 at 18:34

Material UI does not hide when using display

4 Answers4

Linked