How to use react-jss with MaterialUI 4?

Question

I've used react-jss with material-ui for a while now. The material-ui 3.x -> 4.x migration guide says that MUI 4 isn't compatible with React JSS 9.x:

https://material-ui.com/guides/migration-v3/

Furthermore, it looks like the react-jss project has been archived:

https://github.com/cssinjs/react-jss

...but JSS is up to at least version 10:

https://cssinjs.org/?v=v10.0.0-alpha.16

So I'm completely confused on how to use React-JSS with MUI 4. Is the import something other than "react-jss": "8.6.1", in package.json? Should I switch to Emotion or Styled Components? So confused.

Answer 1

You can use:

"react-jss": "10.0.0-alpha.16"

https://github.com/cssinjs/react-jss is archived because of it being restructured to be part of the jss monorepo (multiple packages in one GitHub repository): https://github.com/cssinjs/jss/tree/master/packages/react-jss.

Whenever you upgrade Material-UI, you should check to see if the jss version in Material-UI has changed so that you can stay in sync; otherwise you'll be pulling in two versions of jss. You can check the Material-UI jss version here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/package.json#L48

You should also look into whether you need to be using react-jss directly vs. just using the jss wrappers in Material-UI (e.g. withStyles, makeStyles, etc.).