材质-使用显示时UI网格不隐藏 [英] Material-UI Grid does not hide when using display

问题描述

我想使用MUIGrid，如果屏幕很小，我想隐藏一项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仍然显示)。我不能将Display与Grid一起使用吗？如果是，那么为什么？

推荐答案

style functions组件不自动支持Grid。

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

Grid组件同样具有component prop，因此您可以拥有将其呈现委托给Box的Grid或委托给Grid的Box。

下面的示例(基于您的代码)显示了同时使用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);

这篇关于材质-使用显示时UI网格不隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！