'Creating MUI v5 theme, how can I override the colors of the AppBar's children components?
I've been using this Material-UI Theme Creator tool to put together a MUI theme that I like: mui-theme-creator
This tool is using Material UI version 4 I believe, while in my project I'm using @mui/material version 5.2.1, and I'm trying to figure out how I can "convert" the code from the theme-creator to a version compatible with version 5.
Now, here's the theme code from the Theme Creator:
import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme'
export const themeOptions: ThemeOptions = {
palette: {
type: 'dark',
primary: {
main: '#ff3d00',
},
secondary: {
main: '#2962ff',
},
...........
props: { // Is there a way to do anything like this with Mui v5?
MuiAppBar: {
color: 'inherit',
},
},
overrides: {
MuiAppBar: {
colorInherit: {
backgroundColor: '#303030',
color: '#fff',
},
},
},
};
Screenshot of the AppBar using the above ThemeOptions code
Now, while I've done my best to try and convert this code to v5 and replicate it's effects, I'm having one main issue. This is the relevant code I've got so far:
import { createTheme } from '@mui/material/styles'
export const theme = createTheme({
mode: 'dark',
palette: {
primary: {
main: '#ff3d00',
},
secondary: {
main: '#2962ff',
},
..............
components: {
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: '#303030',
color: '#ffffff',
},
},
},
},
})
The main issue I'm having is that, while the AppBar does change it's background color, I can't seem to find an option using createTheme that will change the color of the child elements inside the AppBar.
If there's no way to do it like in version 4 would it best if I just create a theme based on the main theme I've already created and use it solely for theming my Navbar component?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
