在 Material UI 中的 <Grid> 上应用 box-shadow

Question

如何在 Material UI 中将 box-shadow 应用于 <Grid>？我已经阅读了Shadows - Material UI 上的官方文档，但我不明白如何在<Grid> 上应用它。

我已经彻底研究了这个问题，但仍然没有答案。

Code

谢谢！

Answer 1

boxShadow 属性仅由Boxelements 支持（我认为）。所以为了给网格添加阴影，你可以在一个类的css中定义它，然后将该类添加到网格中。

见下面精简的示例代码

const useStyles = makeStyles((theme) => ({
  gridClassName: {
    boxShadow: "5px 10px red",
  },
 // other classes here
}));
export default function MyGridComponent() {
  const classes = useStyles();

  return (
    <Grid container className={classes.gridClassName}>
      <Grid item> .... </Grid>
    </Grid>
  )
}