Estoy usando MUI React para crear un menú y usé el componente AppBar . Quiero personalizar de esta manera:
brown.myBrown = '#544846'; const brownTheme = createTheme({ palette: { primary: { main: brown.myBrown, contrastText: grey[50] } } });El campo contrastText no funciona y el resultado es una barra de aplicaciones marrón con texto de color marrón como se muestra aquí:
Captura de pantalla del componente AppBar Los elementos del menú son visibles solo cuando paso el mouse sobre ellos.
¿Cómo puedo cambiar el color del elemento en grey[50] ?
El valor de contrastText solo se aplica si establece la propiedad de color de la siguiente manera en su componente AppBar:
<AppBar color={'primary'}>(O a 'secundario' si desea utilizar el valor correspondiente de contrastText).
Si no desea establecer esa propiedad, también puede usar este enfoque:
const theme = useTheme(); ... <AppBar [...] sx={{color: theme.palette.primary.contrastText}}>color no establece el color de fondo sino el color de los descendientes.