Material-UI Grid在使用显示时不隐藏

Question

我想使用 MUI Grid，如果屏幕很小，我想隐藏一项 Grid，所以我找到了一个名为 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 组件不会自动支持style functions。

利用样式函数的最简单方法是使用Box component。 Box 组件使所有样式函数（例如display）都可用。 Box 组件有一个component prop（默认为div）来支持使用Box 向另一个组件添加样式函数。

Grid 组件同样有一个component 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

Material UI 公开了一个<Hidden> 组件来实现这一点。只需为特定的屏幕尺寸包装您想要隐藏的组件：

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

您可以在documentation 中找到更多示例。

Answer 3

在MUI v5中，您可以直接在Grid 上更改display 的值，而无需再使用Box：

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

Answer 4

Grid Items 只是设置你的布局。

它们实际上不显示任何内容。 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 元素。