I am using a custom hook that returns two booleans
which I'm passing to useStyles
as props. The problem is that when the state of those booleans change - useStyles
does not update the style of the component.
Component:
const SomeComponent = ({ children }) => {
const {boolean1, boolean2} = useCustomHook();
const classes = useStyles({ boolean1, boolean2 });
return (
<Box className={classes.content}>{children}</Box>
)
Style:
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`;
},
}));
What seems to be the problem here?