reactjs - Material-UI Grid在使用显示时不隐藏
问题描述
我想使用 MUI ,如果屏幕很小,Grid
我想隐藏一个项目,所以我找到了一个叫做Display的东西。我的代码如下所示:Grid
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
可能的显示器吗?如果是,那为什么?
解决方案
组件不会自动支持样式功能。Grid
利用样式功能的最简单方法是使用Box 组件。该Box
组件使所有样式功能(例如display)可用。该Box
组件有一个组件道具(默认为div
),以支持使用Box
将样式功能添加到另一个组件。
该Grid
组件同样有一个组件 prop,因此您可以有一个Grid
将其渲染委托给 a 的 aBox
或一个Box
委托给 a 的 a 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);
推荐阅读
- r - 将 geom_raster() 中的对角线从左下到右上更改为从左上到右下
- python - 如何修复此 Jquery bootstrap.bundle.min.js:6 导航栏中出现的错误?
- python-3.x - 为什么我无法将我的 Python 脚本连接到我的 SQL 文件?
- python - 如何编写包装器来修复函数中的任意参数
- c - 是否可以在 C 中返回不同的“false”?
- python-3.x - 如何更改之间的值蟒蛇lxml
- c - 如何在C中的二维数组中找到最高和最低数字及其位置
- json - 如何在我的 android 应用程序中添加 JSON 获取方法
- javascript - 打字稿符号异步功能作为类型/接口属性
- javascript - 在 P5.js 中改变对象高度的正弦函数