MUI Dialog Background Color

Question

I have a mui dialog and would like to set its background to black. (no color), but I don't succeed. And I don't understand why it doesn't work.

My Dialog:

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

My TestTheme looks like this:

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

and it looks like this:

As we can see the dialog color has not the same black as the background even I have set the colors for both correctly.

If I set the colors :

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

How can I set the background color of the dialog to black (no color)? (Regardless if it make sence or not, I would like to understand)

Answer 1

You are doing everything right with the way you set the background color. The reason you see two different black colours is because when the Dialog is open is getting a class of MuiBackdrop-root which has a background-colour of background-color: rgba(0, 0, 0, 0.5); so this additional semi transparent layer is causing this colour difference.

Here is a codesandbox with a solution to your issue.

Code:

    <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>

Hope it helps.