该风格的功能都不会自动支持
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);
