I'm using MUI React to create a menu and I used the AppBar component.
I want to customize in this way:
brown.myBrown = '#544846';
const brownTheme = createTheme({
palette: {
primary: {
main: brown.myBrown,
contrastText: grey[50]
}
}
});
The contrastText field doesn't work and the result is a brown appBar with also text color brown as show here:
Screenshot of AppBar component The menu items are visibile only when I hover on them.
How can I change the item color in grey[50]?
The value of contrastText only gets applied if you set the color property as follows in your AppBar component:
<AppBar color={'primary'}>
(Or to 'secondary' if you want to use the corresponding contrastText value.)
If you don't want to set that property you can also use this approach:
const theme = useTheme();
...
<AppBar [...] sx={{color: theme.palette.primary.contrastText}}>
color doesn't set the background-color but the color of descendants.