如何使用 MUI 的阴影？

Question

我想给<Grid container>组​​件添加阴影。

我在文档中看到这里。我应该只使用类似boxShadow={1}和 import 的东西import { shadows } from '@material-ui/system';。

我已经这样做了，但没有得到任何结果。

有人知道向组件添加阴影的正确方法吗？

Answer 1

由于<Grid />没有道具boxShadow，

<Box />与其组件一起用作Grid 就可以了。

<Box
  component={Grid}
  container
  boxShadow={3}
>
  <Box ... />
  <Box ... />
  ...
</Box>

参考：

• MUI盒子道具 API

• MUI网格道具 API

演示和来源：

<Box
  component={Grid}
  container
  boxShadow={3}
  spacing={3}
  style={{ padding: 10 }}
>
  <Box component={Grid} item boxShadow={0} xs={3}>
    boxShadow={0}
  </Box>
  <Box component={Grid} item boxShadow={1} xs={3}>
    boxShadow={1}
  </Box>
  <Box component={Grid} item boxShadow={2} xs={3}>
    boxShadow={2}
  </Box>
  <Box component={Grid} item boxShadow={3} xs={3}>
    boxShadow={3}
  </Box>
</Box>