Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

The render sequence is wrong when passing CSS classes to child

See original GitHub issue

Let’s assume we have ComponentA and ComponentB in different files.

// file1.tsx
const useStyles = makeStyles()(({ palette, breakpoints }) => ({
  extra: {
    color: "red"
  }
}));

const ComponentA = () => {
  const { classes, cx } = useStyles();
  return <ComponentB extraClasses={classes.extra} />;
}

// file2.tsx
const useStyles = makeStyles()(({ palette, breakpoints }) => ({
  root: {
    color: "blue",
    [breakpoints.up("sm")]: {
      color: "yellow"
    }
  }
}));

export const ComponentB = ({ extraClasses }: { extraClasses?: string }) => {
  const { classes, cx } = useStyles();
  return <div className={clsx(classes.root, extraClasses)}>Hi</div>;
};

Ideally when using JSS, the extraClass in ComponentA will override the root class in ComponentB which can produce the right result on screen, which is that the text should be in “red” color.

Problems:

If using clsx to merge classes, then two classes will be generated but in wrong sequence. The root class in ComponentB will always override extraClass in componentA and display “blue” color which is wrong.
If using cx to merge classes, then one merged class will be generated in right sequence, but if there’s any breakpoint related css in ComponentB, then it will not work well because the css priority is always breakpoint first, so it will display “yellow” color which is also wrong.

Thanks for building this amazing package and this is the only issue we have so far.

Hope you can provide a fix or let us know if there’s any workaround. Our project is huge so finding them and changing them one by one is kind of impossible…

Cheers CJ