如何移除MUI Dialog组件的默认白色弹窗背景？

方法一：直接用sx属性（快速局部修改） #

直接在Dialog组件上通过sx属性覆盖内部Paper元素的样式，这是最直接的局部修改方式：

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  sx={{
    '& .MuiPaper-root': {
      backgroundColor: 'transparent', // 设为透明移除白色背景
      boxShadow: 'none' // 可选：移除弹窗阴影
    }
  }}
>
  <DialogContent>
    <h1>are you sure to logout?</h1>
    <DialogActions>
      <Button>yes</Button>
      <Button onClick={() => setOpen(false)}>no</Button>
    </DialogActions>
  </DialogContent>
</Dialog>

方法二：用styled组件封装自定义Dialog（复用场景） #

如果需要在多个地方使用无背景的Dialog，可以用MUI的styled工具封装一个自定义组件：

import { styled } from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';

// 封装透明背景的Dialog
const TransparentDialog = styled(Dialog)(({ theme }) => ({
  '& .MuiPaper-root': {
    backgroundColor: 'transparent',
    boxShadow: 'none'
  }
}));

// 使用自定义组件
<TransparentDialog
  open={open}
  onClose={() => setOpen(false)}
>
  <DialogContent>
    <h1>are you sure to logout?</h1>
    <DialogActions>
      <Button>yes</Button>
      <Button onClick={() => setOpen(false)}>no</Button>
    </DialogActions>
  </DialogContent>
</TransparentDialog>

方法三：修改全局Theme（全局生效场景） #

如果希望所有Dialog都默认去掉白色背景，可以修改MUI的全局主题：

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

const theme = createTheme({
  components: {
    MuiDialog: {
      styleOverrides: {
        paper: {
          backgroundColor: 'transparent',
          boxShadow: 'none'
        }
      }
    }
  }
});

// 将需要应用主题的组件包裹在ThemeProvider中
<ThemeProvider theme={theme}>
  {/* 你的Dialog组件及其他页面内容 */}
  <Dialog
    open={open}
    onClose={() => setOpen(false)}
  >
    <DialogContent>
      <h1>are you sure to logout?</h1>
      <DialogActions>
        <Button>yes</Button>
        <Button onClick={() => setOpen(false)}>no</Button>
      </DialogActions>
    </DialogContent>
  </Dialog>
</ThemeProvider>

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