Passed properties not updated from re-rendering using (Material-ui + React Redux + Next.js in SSR)

Question

Hi I am not sure whether it's bug or I appreciate if someone can help me.

I used Next.js v10+ with Material-UI and React Redux / Redux in SSR. Actually I have a Redux Prop passed to the useStyles:

const extended = useSelector(state => state.someStore.extended);
const classes = useStyles({
    extended
});

and used in makeStyles:

toolbar: {
    height: props => props.extended ? 180 : 600
}

When the event that updates "extended", re-rendering occurs. However, the "extended" kept the old value 180 but not 600.

The above is fine when in development mode but it's problematic in SSR. I tried using styled-components in SSR and it worked as expected.

Do I miss some config in Material UI + Redux + SSR? Thanks a lot.

question from:https://stackoverflow.com/questions/65856814/passed-properties-not-updated-from-re-rendering-using-material-ui-react-redux

Answer 1

Redux/React Redux is fine. I have to use clsx to solve the problem.

(Below codes are all cases for Next.js SSR)

CASE 1 (it works!):

<Toolbar className={clsx(classes.toolbar, expanded && classes.expanded)} />
const useStyles = makeStyles(theme => ({
    toolbar: {
        height: 180
    },
    expanded: {
        height: 600
    }
}));

CASE 2 (it doesn't works! (my original work):

const classes = useStyles({ expanded });
<Toolbar className={classes.toolbar} />
const useStyles = makeStyles(theme => ({
    toolbar: {
        height: props => props.expanded ? 600 : 180
    }
}));

CASE 3 (It works!): While it's fine using styled-components like this way:

<Toolbar expanded={expanded} />
const Toolbar = styled.div`
    height: ${props => props.expanded ? '600px' : '180px'};
`;