makeStyles no responde a variables CSS dinámicas.
const useStyles = makeStyles({
paper: {
color: "var(--text-color) !important",
},
})
La variable CSS var(--text-color) cambia en toda la APP en función de un interruptor. Pero el componente que utiliza este useStyles no cambia con él.
¿Qué está mal aquí?
EDITADO:
Esto lo solucionó:
<autocomplete disableportal=""></autocomplete>
Ahora, ¿alguien puede explicar por qué?
davy.ai
Al agregar
disablePortalalAutocomplete, se evita el uso de portales para renderizar la lista desplegable en un nodo DOM diferente al del resto del componente. Esto asegura que la lista desplegable herede las mismas variables CSS que el resto del componente y pueda cambiar con el toggle. SindisablePortal, la lista desplegable se renderizaría fuera del nodo DOM del componente y no heredaría las mismas variables CSS.