Material-UI Grid не скрывает использование дисплея

Question

Я хочу использовать MUI Grid https://material-ui.com/api/grid/, и я хотел скрыть один элемент Grid, если экран маленький, поэтому я нашел что-то под названием Display https://material-ui.com/system/display/. Мой код выглядит следующим образом

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

Я не понимаю, почему он не работает (текст YY по-прежнему отображается). Не могу ли я использовать дисплей с сеткой, может быть? Если да, то почему?

Answer 1

Функции стиля не поддерживаются автоматически компонентом Grid.

Самый простой способ использовать функции стиля - использовать компонент Box . Компонент Box делает доступными все функции стиля (например, display ). Компонент Box имеет компонент prop (по умолчанию div) для поддержки использования Box для добавления функций стиля к другому компоненту.

Компонент Grid также имеет компонент prop , так что вы можете иметь Grid, который делегирует его рендеринг Box или Box, который делегирует Grid.

Пример ниже(на основе вашего кода) показывает оба способа использования Box и Grid вместе.

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

Answer 2

Сетка Элементы просто настраивают ваш макет.

Они на самом деле ничего не отображают. Опция отображения MUI предназначена для скрытия определенных элементов.

Попробуйте это:

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

Это позволит скрыть отдельный элемент span, даже если сетка все еще там.