MUI dark theme isn't applied to the background - reactjs

Question

I have my react application where I want to apply MUI darkBaseTheme. Without it, part of my app looks like this:
After I wrap all the html stuff in my render() with:
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
</MuiThemeProvider>
Having those imports:
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
It looks like this:
So it changed RaisedButtons. I know it shouldn't change html ones. But why didn't it change the background to dark? Is there a way to do this, or do I have to do it manually without MUI?

Answer 1

You need to include the <CssBaseline /> component at the root of your app as this is what deals with changing the background colour on the body.
Docs

Answer 2

I had a similar issue. The body background was not changing when I switched to dark mode.
Solution:
Move your CssBaseline inside MuiThemeProvider. Otherwise the body background won't change when you use type dark in your theme.
<MuiThemeProvider theme={theme}>
<CssBaseline />
<App />
</MuiThemeProvider>

Answer 3

MUI v5 Update
You can change the background to a dark color by setting the mode property to dark, and include the CssBaseline which sets the backgroundColor of the body element:
const theme = createTheme({
palette: {
mode: 'dark',
},
});
<ThemeProvider theme={theme}>
<CssBaseline />
<Content />
</ThemeProvider>
If you want to use a custom color for the background:
const theme = createTheme({
palette: {
background: {
default: 'gray',
},
},
});