[migration] How can I replace makeStyles in my code?

[SoulDancer27]

I'm sorry, that's kind of a novice question. I'm currently transferring from material-ui v4 to mui v5 and I used to have a lot of makeStyles and jss styling in the code. I would like to ask what is the most appropriate way to replace makeStyles for creating classes based on theme variable values. I have code like this:

` const useStyles = makeStyles((theme) => ({

box: { marginTop: theme.spacing(0.5), marginLeft: theme.spacing(-2.5), },

table: { maxHeight: '50vh', overflow: 'auto', maxWidth: calc(100vw-${theme.spacing(5)}), marginRight: theme.spacing(2.5), }, tableCell: { padding: ${theme.spacing(0.5)} ${theme.spacing(1)} },

tableCell: {
  fontSize: '0.6em',
  padding: `0px ${theme.spacing(1)}`,
},

},

box: {
  marginTop: theme.spacing(0.5),
  marginLeft: theme.spacing(0),
  marginRight: theme.spacing(2.5),
},

}, } )`

If possible, I would like to use a kind of jss solution and not pure css. I know about styled() approach, but wanted to ask if there are more appropriate ways of styling components with classes?

Thanks in advance :)

[JoaoAugustoPansani]

It is on the documentation:

"The makeStyles JSS utility is no longer exported from @mui/material/styles. You can use @mui/styles/makeStyles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @mui/material, it's recommended that you use the ThemeProvider component from @mui/material/styles instead."

Source: Migration from v4 to v5.

If that doesn't solve try using one of this aproaches from Stack Overflow.

[mnajdova]

You can still use JSS, you just need to update the imports to point directly to @mui/styles. You could also update them to use styled() or sx, or tss-react which is a new library that has the makeStyles API but works with emotion (watch out for the tomorrow release, that will include a codemod for migrating from @mui/styles to tss-react). https://mui.com/material-ui/guides/migration-v4 contains all info that you may need for the migration.

[allicanseenow]

@mnajdova Which should be the right approach to migrate the theme engine? I have over a hundred components in my project and it seems styled() and sx (the 2 official solutions provided by MUI) all follow the pattern that doesn't seem to allow recyclable CSS classes. I am not sure if I want to use another 3rd-party option like tss-react For example, if I have this piece of code:

const useStyles = makeStyles({
   class1: ....
})

const Component = () => {
const classes = useStyles()
return (
  <>
        <div className={classes.class1}></div>
         <span className={classes.class1}></span>
  </>
)
}

I'm not a fan of using styled() because it will create a lot of custom components in React Dev tools, and the span and div in the above example are 2 different, unrelated components that happen to share a CSS class. This way of writing where several components share the same CSS class is similar to how you write a native CSS, JS and HTML web app without any 3rd party framework or styling library. How can I use sx to replace makeStyles in the old code?

And I would like to ask if using sx will cause your component to have too much inline styling, which can make a big component much more verbose?

[allicanseenow]

I suppose this can be used as a reference? https://github.com/mui/material-ui/issues/26571

But this leads to another question from me: I'm leaning toward tss-react due to the heavy reliance of my project on makeStyles however I wonder if this will still work with MUI v6 which I have recently heard of?

[tirth177]

@allicanseenow facing the same problem. Have you found a solution for this?

[allicanseenow]

In the end, I use tss-react.

sx makes the jsx very disorganized and verbose, and it requires just way too many major changes for big projects. styled is even worse as it will create a lot of boilerplate components in your react tree.

tss-react faces none of these issues