Mui莫代尔背景黑色

Question

我目前正在使用 mui modal，它的背景是纯黑色的，尽管我说我希望背景透明。 我确实尝试将其设置为颜色：透明

Answer 1

这里有一个解决方案，只需添加这个 css 更改 '& .MuiBackdrop-root': { backgroundColor: 'transparent' }

  <Modal
    open={open}
    sx={{ '& .MuiBackdrop-root': { backgroundColor: 'transparent' } }}
    onClose={handleClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
  >

这是一个工作示例https://stackblitz.com/edit/react-npuups?file=demo.tsx

Answer 2

您需要将模态内容包装在 Box 中并使用这些样式

  sx={{
                outline: 0, // Removing default outline
                border: 'none' // Removing border
              }}

消除模式中的黑色边框