Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

custom theme background color

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.

like image 693
Gerard López Sorribas Avatar asked Jan 10 '18 11:01

Gerard López Sorribas


People also ask

How do I change the background color in material UI?

To set a background color on Material UI's Paper, you simply need to apply the background-color CSS property to the root element of the Paper. Setting the styles on the root element of any Material UI component can be done in multiple ways, but the most common is to use the useStyles hook.

What is a custom background?

Custom Backgrounds is a theme feature that provides for customization of the background color and image.

How can I change my background color?

Select Start > Settings > Personalization > Colors, and then choose your own color, or let Windows pull an accent color from your background.


1 Answers

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.

like image 96
knro Avatar answered Sep 30 '22 13:09

knro