React MUI useStyles no se actualiza cuando cambia el estado.
Estoy utilizando un gancho personalizado que devuelve dos valores booleanos que estoy pasando a useStyles como props. El problema es que cuando cambia el estado de esos valores booleanos, useStyles no actualiza el estilo del componente.
Componente:
const SomeComponent = ({ children }) => {
const {boolean1, boolean2} = useCustomHook();
const classes = useStyles({ boolean1, boolean2 });
return (
<Box className={classes.content}>{children}</Box>
)
Estilo:
export const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
content: {
display: ‘flex’,
minHeight: ({ boolean1, boolean2 }) => {
const offsetY =
boolean1 && !boolean2
? 100
: 200
return calc(100vh - ${offsetY}px) !important;
},
}));
¿Cuál parece ser el problema aquí?
davy.ai
El problema es que
useStylesno actualiza el estilo del componente cuando cambia el estado de losbooleanos. Esto es probablemente porqueuseStylessolo se llama una vez cuando se renderiza el componente inicialmente, y no cuando cambia el estado de losbooleanos. Para solucionar esto, puedes usar el ganchouseEffectpara llamar auseStylescada vez que cambie el estado de losbooleanos.