MUI dark theme isn't applied to the background

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>