custom theme background color

Question

I have material-ui@next installed and I want to customize the background color of the theme.

I tried this:

const theme = createMuiTheme({
  palette: createPalette({
    type: 'light',
    primary: purple,
    background: {
      default: '#303030',
    },
  }),
});

And this.

<MuiThemeProvider theme={theme}>

But the background color is still white when it should change to red.

Overzealous

Answer 1

I also faced this issue. To fix this, import CssBaseline:

import CssBaseline from '@mui/material/CssBaseline';

Then add it like this:

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

Using CssBaseline while setting background color as follows the color gets applied:

import { createTheme } from '@mui/material/styles';

const theme = createMuiTheme({
  palette: {
    background: {
      default: "#303030"
    }
  }
});

You can find a working snippet here.

Hensel

It's a simple mistake to make but it's obvious after being fixed. The CssBaseline needs to access the theme for the background color and has to be a child element in order to access it. – Stultz