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仍然出现）。不能将显示与Grid一起使用吗？如果是，那为什么呢？

Answer 1

该风格的功能都不会自动支持Grid组件。

利用样式功能的最简单方法是使用Box组件。该Box组件使所有样式功能（例如display）都可用。所述Box组件具有组件道具（默认为div）使用，以支持Box对风格函数添加到另一组件。

该Grid部件一样有分量的道具，让你可以有一个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);