MUI Modal背景遮罩黑色问题：设置透明无效求助

你用color: transparent没用是因为这个属性控制的是Modal内容容器的颜色，和背景遮罩完全无关。MUI的Modal遮罩由内置的Backdrop组件管理，得针对它来修改样式，下面是几种可行的方案：

方案一：通过backdropProps直接设置遮罩样式 #

直接给Modal组件传入backdropProps，覆盖遮罩的背景色：

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

<Modal
  open={open}
  onClose={handleClose}
  backdropProps={{
    style: {
      backgroundColor: 'transparent',
    },
  }}
>
  {/* 这里放你的Modal内容 */}
</Modal>

方案二：用sx样式嵌套选择器修改遮罩 #

通过sx的嵌套选择器定位到遮罩的类名，直接修改样式：

<Modal
  open={open}
  onClose={handleClose}
  sx={{
    '& .MuiBackdrop-root': {
      backgroundColor: 'transparent',
    },
  }}
>
  {/* 这里放你的Modal内容 */}
</Modal>

方案三：全局修改主题（所有Modal生效） #

如果你的项目里所有Modal都需要透明遮罩，可以通过自定义MUI主题全局配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiBackdrop: {
      styleOverrides: {
        root: {
          backgroundColor: 'transparent',
        },
      },
    },
  },
});

// 在应用根组件外层包裹ThemeProvider
<ThemeProvider theme={customTheme}>
  {/* 你的应用内容 */}
</ThemeProvider>

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