1

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?

0 Answers0