MUI Dialog Background Color - material-ui

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.