Mui v5 component classes always take precedence

[garronej]

Mui v5 component classes always take precedence

[garronej]

Hi,
Thanks you for the kind words and the comprehensive description of your issue.
Trust that I will have a look promptly.

[chazsolo]

I will be able to check to see if all this works on Tuesday - I'll let you know how it goes!

[garronej]

I'd love to send you something but as I said it's all on a different system, I have to type out what we have by hand.

Damn man, I feel you.

Don't forget to update this:

- import createCache from 'tss-react/@emotion/cache';
+ import createCache from "@emotion/cache";

- "@emotion/cache": "^11.4.0", #You don't need that. 
"@emotion/react": "^11.4.1",
-"@emotion/styled": "^10.0.27",
+"@emotion/styled": "^11.3.0",
"@mui/material": "^5.0.2",
- "tss-react": "^0.9.4",
+ "tss-react": "^1.0.0",

I think it's the outdated @emotion/styled that is the source of the problem.

[chazsolo]

I think it's the outdated @emotion/styled that is the source of the problem.

You were spot on - this fixed it!

[garronej]

[garronej]

Your problem is due to the fact that, in your workspace, @mui/material and tss-react aren't using the same instance of @emotion/cache.
I'll get back to you

[garronej]

Everything should work in v0.9.4. Update @mui/material, tss-react, @emotion/react and @emotion/styled to the latest version in your package.json, remove your .yarn.lock file and reinstall.
Sorry you had to go through this.

[garronej]

Just one last thing, I'd suggest you this change in your configuration:

import { useTheme } from '@mui/material/styles';
-import theme from '$src/theme';
+import type theme from '$src/theme';

-function useTheme() { return theme; }

-export const { makeStyles, useStyles } = createMakeStyles({ useTheme });
+export const { makeStyles, useStyles } = createMakeStyles({ "useTheme": useTheme as (()=> typeof theme) });

It's better as you might want, in the future, implement a dark mode or something like that. The useTheme hook is supposed to pick up the contextual theme object that you provided using <ThemeProvider />

I have updated the documentation regarding this aspect as you are not the first one my documentation confused.

[chazsolo]

Unfortunately this did not work for us - after making the updates the order of CSS injection is still backwards with tss- classes being overwritten.

I'm still curious as to what the cache creation is really doing as I commented above in my code - even though I'm creating a new cache with the key of mui that doesn't seem to make any effect. Whether I include the cache or not everything remains the same.

[garronej]

😮
I'm sorry you still have problems.
Your problem is due to the fact that tss-react and @mui/material are using different versions of @emotion/cache.
Have you tried updating @emotion/react, @emotion/styled, @mui/material, tss-react in your package.json, deleting you .yarn.lock or package-lock.json file and reinstalling everything?
What package manager are you using?

@emotion/cache is a dependency of @emotion/react that is, itself, a peer-dependency of both @mui/material and tss-react.

[garronej]

If you repo is open-source I can fix it directly. Otherwise will you send me your yarn.lock file (after re-installing everything).

[chazsolo]

We're using npm. I'd love to send you something but as I said it's all on a different system, I have to type out what we have by hand.

I did remove our lock file and reinstall everything, ensuring those packages are up-to-date. I will do some more investigation and let you know if I can't figure it out.

Here's the packages/versions we're running:

"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^10.0.27",
"@mui/material": "^5.0.2",
"tss-react": "^0.9.4",

[garronej]

Let's go! Glad it worked!

[netzwerg]

First things first: Thanks for tss-react – long live makeStyles! 🎉

I've just spent more than an hour figuring out that @emotion/styled is a required dependency – where would be the best place to document this more prominently?

[garronej]

Hi @netzwerg,

Sorry you had to go through this. Been there, very frustrating. I added a warning in the setup page but apparently it's not enough, I will edit.

[netzwerg]

I copied the yarn add line, so this totally would have saved me (the warning was too far down 🙈) – thanks a lot! 🎉

[garronej]

Thanks for reporting