如何修改MUI Modal背景遮罩颜色？backdropProps已废弃

MUI的backdropProps属性已被废弃，目前有两种更规范的方式修改遮罩颜色：

方法1：通过sx属性的嵌套选择器直接修改 #

利用sx的嵌套选择器选中遮罩的类名，直接设置样式：

<Modal 
  open={model}  
  maxWidth={'md'} 
  fullWidth 
  sx={{
    backgroundColor: 'transparent',
    // 自定义遮罩颜色，这里示例为半透明深灰色
    '& .MuiBackdrop-root': {
      backgroundColor: 'rgba(0, 0, 0, 0.3)',
    }
  }}
>
  {/* 你的Modal内容 */}
</Modal>

方法2：使用slotProps配置遮罩（推荐，符合MUI v5规范） #

MUI v5引入了slotProps属性，专门用来配置组件内部的子元素，针对遮罩可以这样写：

<Modal 
  open={model}  
  maxWidth={'md'} 
  fullWidth 
  sx={{ backgroundColor: 'transparent' }}
  slotProps={{
    backdrop: {
      sx: {
        // 自定义遮罩颜色，这里示例为半透明白色
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
      }
    }
  }}
>
  {/* 你的Modal内容 */}
</Modal>

注意事项 #

• 确保使用的是MUI v5及以上版本，slotProps是v5的特性
• 颜色值支持十六进制、RGB/RGBA，也可以直接使用MUI主题中的颜色（比如theme.palette.primary.dark）

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