如何在Material UI的<Grid>组件上应用box-shadow属性？

方案1：使用MUI内置阴影属性（推荐） #

Material UI v5及以上版本的Grid组件默认支持系统样式属性，直接使用boxShadow参数即可：

• 选用官方预设阴影：可选值为0~24的数字，对应不同层级的阴影效果
  示例代码：

  <Grid boxShadow={2} item xs={6} bgcolor="#fff" p={2}>
    测试内容
  </Grid>
  

• 自定义阴影数值：直接传入符合CSS规范的box-shadow字符串即可
  示例代码：

  <Grid boxShadow="0 4px 16px rgba(0, 0, 0, 0.12)" item xs={6} bgcolor="#fff" p={2}>
    测试内容
  </Grid>
  

如果使用v4版本，可在外层嵌套Box组件，将boxShadow属性写在Box上即可。

方案2：通过sx属性配置（v5专属快捷方案） #

使用MUI提供的sx内联样式属性实现自定义：

<Grid 
  item
  xs={6}
  sx={{
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
    backgroundColor: '#fff',
    padding: '16px'
  }}
>
  测试内容
</Grid>

方案3：自定义class样式 #

如果你更习惯写外部样式，直接给Grid添加自定义类名后配置样式即可：

// 组件代码
<Grid className="custom-grid-shadow" item xs={6}>
  测试内容
</Grid>

// 样式文件代码
.custom-grid-shadow {
  background-color: #fff;
  padding: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

注意事项 #

如果阴影不生效，优先检查Grid是否设置了背景色，透明背景下阴影会无法正常显示，添加对应背景色即可解决。

内容的提问来源于stack exchange，提问作者Wolfizzy