Material-UI Background Color can be customized once and used across all components in an app. There are several ways of doing this at scale, and most involve updating the theme palette or using theme overrides.
I will build the mini app below using Paper, FormLabel, and Buttons. All will draw their background color from the theme. If I added more Buttons or another Paper component, the components would automatically be styled with the appropriate background color.
Most of the code for this demo is in the first section. The Resources section has additional useful links.
Override MUI Theme Palette Primary Main Color
Many MUI components pull their background color from the primary theme color. This is found in the theme object at theme.palette.primary.main.
To customize primary.main, create a new theme using createTheme and then pass in a new color value using the syntax below:
import { createTheme } from "@mui/material/styles";
const PrimaryMainTheme = createTheme({
palette: {
primary: {
main: "#228B22"
}
}
});
export { PrimaryMainTheme };
Next, import this custom theme into your JSX. Use a ThemeProvider to wrap only the components that need this custom theme:
import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import FormLabel from "@mui/material/FormLabel";
import { ThemeProvider } from "@mui/material/styles";
import { PrimaryMainTheme } from "./PrimaryMainTheme";
export default function BackgroundOverride() {
return (
<ThemeProvider theme={PrimaryMainTheme}>
<Paper sx={{ padding: 2, display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: 200}}>
<Button variant="contained">Button 1</Button>
<Button variant="contained">Button 2</Button>
<Button variant="contained">Button 3</Button>
</Paper>
</ThemeProvider>
)
}In the code above, I have not set a color on the Buttons. I have only given them the contained variant. This variant will pull from the theme primary.main in order to set a background color.
Updating primary.main will change the background color for all components with both access to the custom theme and a background color by default. Many components do not have a background color, so this option will not automatically give them a background.
This is similar to changing theme.typography.fontSize to make all components inherit a custom font Size.
Override MUI Theme Component Color
In the section above, I wrapped Button components in a Paper component. The Paper component does not have a background color by default. We can give it one by default using the theme.
In the theme, we can access styleOverrides for most components, including Paper. Then we can update the root styles such as the background color.
components: {
MuiPaper: {
styleOverrides: {
root: {
backgroundColor: "grey"
}
}
}
}After adding the code above to PrimaryMainTheme, our Paper component will automatically pick up a grey background.
Set MUI Background Color with sx
The sx prop has access to the default theme or the theme it is wrapped in. The sx prop will only style one component at a time, but you could use the styled API to style once and import throughout your app (but you have to pass the theme to the API).
Notice the syntax for accessing the theme for a background color value. I didn’t need to access the object starting with theme.palette.
<FormLabel
sx={{backgroundColor: 'primary.main', padding: 1, borderRadius: 1, color: 'white'}}
>
Backgrounds!
</FormLabel>In my tutorial, I added the FormLabel as the first child inside the Paper component.
Resources
Related posts:
