MUI 对话框背景色

Question

我有一个 mui 对话框，想将其背景设置为黑色。 （没有颜色），但我没有成功。 而且我不明白为什么它不起作用。

我的对话：

export const MyDialog = (props: any) => {
        return (
            <ThemeProvider theme={TestTheme}>
                <CssBaseline />
            <Dialog open={true}>
                <DialogTitle>Title</DialogTitle>
                <DialogContentText>Text</DialogContentText>
            </Dialog>
            </ThemeProvider>
        );
};

我的 TestTheme 看起来像这样：

export const TestTheme = createTheme(
    {palette: {
            mode: 'dark',
            background: {
                paper: '#000000',
                // paper: 'red',
                default: '#000000',
            },
        }
    }
)

它看起来像这样：

正如我们所看到的，即使我已经为两者正确设置了 colors，对话框颜色也与背景不同。

如果我设置 colors：

            paper: 'red',
            // paper: '#000000',
            // default: '#000000',
            default: 'blue',

如何将对话框的背景颜色设置为黑色（无颜色）？ （不管有没有道理，我都想明白）

Answer 1

您正在按照设置背景颜色的方式正确地做所有事情。 你看到两种不同的黑色的原因是因为当Dialog打开时得到一个 class 的MuiBackdrop-root有一个背景颜色的background-color: rgba(0, 0, 0, 0.5); 所以这个额外的半透明层导致了这种色差。

这是一个代码框，可以解决您的问题。

代码：

    <Dialog open={true} 
      sx={{ //You can copy the code below in your theme
        background: '#000',
        '& .MuiPaper-root': {
          background: '#000'
        },
        '& .MuiBackdrop-root': {
          backgroundColor: 'transparent' // Try to remove this to see the result
        }
      }}>
        <DialogTitle sx={{ color: "white" }}>Title</DialogTitle>
        <DialogContentText sx={{ color: "white" }}>Text</DialogContentText>
      </Dialog>

希望能帮助到你。