如何为MUI V5 Modal的Backdrop设置自定义样式？

在MUI V5中，Modal的Backdrop是独立的子组件，不再像V4那样可以直接通过Modal根元素的sx属性控制样式，这就是原有配置失效的原因。以下是两种可行的解决方式：

方法一：使用slotProps.backdrop配置样式 #

这是MUI V5推荐的配置方式，直接通过Modal的slotProps属性给Backdrop传递自定义样式：

<Modal
  id='modal'
  open={bool}
  aria-labelledby='modal-modal-title'
  aria-describedby='modal-modal-description'
  disableScrollLock={false}
  sx={{ zIndex: 10 }}
  slotProps={{
    backdrop: {
      sx: {
        backdropFilter: 'blur(14px)',
        background: theme => theme.palette.mode === 'dark' 
          ? 'rgba(104, 99, 99, 0.75)' 
          : 'rgba(255,255,255,0.5)'
      }
    }
  }}
>
  {/* Modal内容 */}
</Modal>

方法二：自定义Backdrop组件 #

如果需要更复杂的自定义逻辑，可以创建独立的Backdrop组件，再通过Modal的backdropComponent属性传入：

import Backdrop from '@mui/material/Backdrop';

const CustomBackdrop = ({ open, ...props }) => {
  return (
    <Backdrop
      open={open}
      sx={{
        backdropFilter: 'blur(14px)',
        background: theme => theme.palette.mode === 'dark' 
          ? 'rgba(104, 99, 99, 0.75)' 
          : 'rgba(255,255,255,0.5)',
        zIndex: theme => theme.zIndex.modal - 1 // 确保层级匹配
      }}
      {...props}
    />
  );
};

// 在Modal中使用自定义Backdrop
<Modal
  id='modal'
  open={bool}
  aria-labelledby='modal-modal-title'
  aria-describedby='modal-modal-description'
  disableScrollLock={false}
  sx={{ zIndex: 10 }}
  backdropComponent={CustomBackdrop}
>
  {/* Modal内容 */}
</Modal>

注意：两种方式都要确保zIndex值与Modal本身的层级匹配，避免出现层级错乱问题。

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