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.
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.
Custom Backgrounds is a theme feature that provides for customization of the background color and image.
Select Start > Settings > Personalization > Colors, and then choose your own color, or let Windows pull an accent color from your background.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With