score:17

Accepted answer

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);

edit use system style functions with grid

score:-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.

score:2

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>

codesandbox demo

score:10

material ui 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 documentation.


Related Query

More Query from same tag