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
useStyles
no actualiza el estilo del componente cuando cambia el estado de losbooleanos
. Esto es probablemente porqueuseStyles
solo se llama una vez cuando se renderiza el componente inicialmente, y no cuando cambia el estado de losbooleanos
. Para solucionar esto, puedes usar el ganchouseEffect
para llamar auseStyles
cada vez que cambie el estado de losbooleanos
.