我想使用 Material UI 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
一起使用吗?如果是的话为什么?
最佳答案
style functions Grid
组件不会自动支持。
利用样式函数的最简单方法是使用 Box component 。 Box
组件使所有样式函数(例如 display )可用。 Box
组件有一个 component prop (默认为 div
)以支持使用 Box
将样式功能添加到另一个组件。
Grid
组件同样具有 component prop ,因此您可以使用将其渲染委托(delegate)给 Box
的 Grid
或委托(delegate)给 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);
关于reactjs - Material UI <Grid> 使用显示时不会隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58189940/