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>

希望能幫助到你。