migrating the styles

[javismiles]

I have migrated from v4 to v5 following your half-clear guide (and second half unclear guide) at
https://mui.com/guides/migration-v4/

The app still runs (phew...), but all the styles are messed up, all the corrections in sliders, buttons etc, all messed up = massive problem.

Your guide is confusing as to how to fix this. Please explain. Say I have something like this:

const useStyles = makeStyles({ root: { margin:3,padding:3, }, contentroot:{ margin:3,padding:3, }, paper:{ margin:0,padding:0, backgroundColor: "#eeeeee", }, margins:{ margin: 0,padding: 0, } });

and then
const classes = useStyles();

and then I apply that for example to a Dialog with
classes={{ root: classes.root, paper: classes.paper, container: classes.margins, paperWidthMd: classes.margins, }}

what changes are needed to make this work in exactly the same way with v5?

same for other similar changes I may have done in sliders, buttons etc,

because all our sliders, buttons etc are now looking messed up with v5, and so far we are feeling like going back to v4 really, what a mess (and I think your migrating document needs a rethink)

[mnajdova]

If you wish to continue to use JSS you should:

1. use <StyledEngineProvider injectFirst> at the root of your app (as described in https://mui.com/guides/migration-v4/#style-library)
2. change the imports for makeStyles, createStyles etc from @material-ui/core/styles to @mui/styles.
3. Make sure that you have your app wrapped in ThemeProvider as described here https://mui.com/guides/migration-v4/#themeprovider-setup

Simple dialog example:

v4 codesandbox - https://codesandbox.io/s/nervous-kepler-rzvr3?file=/src/App.js
v5 codesandbox - https://codesandbox.io/s/elegant-roman-i7gmm?file=/src/App.js:86-344

(most of the changes are in the index.js file)

---

If you want to migrate from JSS to emotion, take a look at https://mui.com/guides/migration-v4/#migrate-from-jss

If none of these work, please provide a reproduction that we can look into, otherwise is not clear what doesn't work.

---

Do you have some actionable suggestions for improving the migration? We know that it is more extensive and tried our best to make it easy to follow, so any feedback here will be very much appreciated.

[kga-gravityandstorm]

We're having the same issue with migration to v5.
Don't have an issue with the migration guide itself. We followed all the steps for migration with JSS, but the style mess up is reproducible. No errors in the console logs, the app 'technically works', but most mui elements either ignore the component styling or are using the mui defaults ( i.e. default colors, fonts,etc.).
This also happens if we remove the use of our custom theme. The mui elements still ignore the styling we wrote for those components.

[javismiles]

@kga-gravityandstorm @mnajdova yes indeed, I have to tell you that we have decided to stay in 4.12.2 and not update to 5. It's a pity but we do not have weeks to reconstruct all our widgets because of this mess, we simply cannot upgrade with this process. Not ideal at all, but we rather have a great looking and working project with 4.12.2 than a giant mess that will take lots of time from us with version 5

[tramert]

I am also having major styling issues from upgrading to V5.

About 50% of my app styling is broken, the app runs but it's unusable. With 100's of files it would take weeks of work to get back to what I currently have with V4.

I tried the troubleshooting steps with no success.

I am going back to V4 for now but this is concerning.

[javismiles]

@tramert exactly, it is just not worth it upgrading with the current issues, hopefully this will be addressed as it is not realistic to expect people to redo, or reanalyze or reconfigure or rethink or re-research how its done etc large parts of their project after an upgrade

[MikaelColliander]

I'm afraid I must second the sentiments stated here. Running a component library with 90+ components all depending on Material UI, there's no way we'd upgrade with forseeable consequences any time soon.

[mnajdova]

@javismiles just curious did you also check https://github.com/garronej/tss-react which is basically replacement for the makeStyles/withStyles API but using emotion instead of JSS?

[mnajdova]

For people coming on the issue and want to continue to use the makeStyles API, we are considering about adding codemod that would migrate @mui/styles to tss-react. You can track the discussion here - garronej/tss-react#32 If someone from the community is interested to help out, let us know.

[ryancogswell]

@mnajdova I plan to work on the codemod from @mui/styles to tss-react, though it might be a few weeks before I have something worth sharing. You can follow my progress here: #31802.

[amir0ff]

For people coming on the issue and want to continue to use the makeStyles API, we are considering about adding codemod that would migrate @mui/styles to tss-react. You can track the discussion here - garronej/tss-react#32 If someone from the community is interested to help out, let us know.

I was facing the same issue, no errors in the console, technically everything works but makeStyles/withStyles do not work as expected.

Please add the codemod for tss-react to the docs in the Migrating from JSS (optional) section.

[ryancogswell]

Please add the codemod for tss-react to the docs in the Migrating from JSS (optional) section.

@amir0ff There is already a large section about the codemod in the documentation you linked to.

[amir0ff]

tss-react

It is indeed 👍🏼 thanks @ryancogswell. I was misguided because the section said (optional). But in fact this migration was required for me because the MUI4 makeStyles/withStyles did not work with the rest of the MUI5 upgrade and the migration was actually necessary using one of these codmods.

[samuelsycamore]

Closing this as completed since the tss-react codemod seems to resolve the immediate problem (beyond the general frustrations with v5 migration).