Material-UI Grid does not hide whe use Display

Question

I want to use MUI Grid https://material-ui.com/api/grid/ and I wanted to hide one item Grid if the screen is small, so I found something called Display ht

Answer 1

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 (
    
      
        XX
      
      
        YY
      
      
        ZZ
      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);