Cannot change the body background via theme configuration

A question / suggestion or a potential bug.

I’m trying to configure a theme and when I try to change the background color the change does not get applied.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

With this theme configuration, I’m expecting the body background color to be #ff0000 but it’s actually #cccccc.

export default {
  palette: {
    type: 'light',
    primary: {
      main: '#00AAE1',
      dark: '#143C8C',
      contrastText: '#fff',
    },
    secondary: {
      main: '#64B42D',
      dark: '#008732',
      contrastText: '#fff',
    },
    error: {
      main: '#BD0043',
      contrastText: '#fff',
    },
    divider: '#D7D6D5',
    background: {
      paper: '#fff',
      default: "#ff0000"
    },
  },

  typography: {
    // Use the system font over Roboto.
    fontFamily: 'Avenir Next, Roboto,"Helvetica Neue",Arial,sans-serif',
    htmlFontSize: 16,
  },
};

const theme = createMuiTheme(uiThemeConfig);

Current Behavior

The body’s background color remains unchanged.

Steps to Reproduce (for bugs)

I found that having the <CssBaseline /> makes the background color possible. https://codesandbox.io/s/kkpw0y1vm5

But without it doesn’t work. https://codesandbox.io/s/q4kvw1kj4q

I must have missed this in the documentation to be a mandatory part of the setup. If so, then please point me to it 😃

Your Environment

Tech	Version
Material-UI	1.0.0-beta.38
React	16.2.0

[nik-john]

I ran into this issue and eventually realized that I was wrapping <CssBaseline> around the <MuiThemeProvider> and not the other way around. This was causing <CssBaseline> to not be aware of the theme configuration.

KO 🔴

<CssBaseline>
  <MuiThemeProvider theme={muiTheme}>
    <App />
  </MuiThemeProvider>
</CssBaseline>

OK ✅

<MuiThemeProvider theme={muiTheme}>
  <CssBaseline />
  <App />
</MuiThemeProvider>

[oliviertassinari]

For reference, the CssBaseline documentation page.