classes are not applied in correct order

[R-154]

Hi,

I'm migrating a project from using jss towards tss-react.
We use MUI5 and after migrating to tss-react i see some classes are changed in order.

I already checked some other topics on this behavior.
What i already did:

• update emotion libs to the latest versions
• added the CacheProvider as a wrapper around MuiThemeProvider
• updated my makeStyles.ts to use tss-react > createMakeStyles
• adding the '&&' rules to the css works, but doesn't sound like a correct solution to me

As an example:
On a mui typography the -root styling of mui is applied in a higher order then the classname which we provides to item.
This results in not applying our classname styling to it.

[garronej]

Hi @R-154,

There is something wrong with your configuration, maybe it's something stupid like you haven't saved or something.
Like it's documented in the jss-to-tss migration guide and here, mui and tss can't use the same emotion cache. You have to use the <CacheProvider />.

I see it's not the case in your configuration since on your screenshoot both classes have the tss prefix.

If you submit the code source or a sandbox I can point to you what's wrong.

[R-154]

Thx @garronej for your feedback.
Indeed all classes have the .tss preffix which is not ok i see.

I already added the createCache to the themeProvider. See the code below:

import type { Theme } from '@mui/material/styles';
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import './styles.css';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';

export const muiCache = createCache({
  key: 'mui',
  prepend: true,
});

const ThemeProvider: React.FC<{ theme: Theme }> = ({ children, theme }) => {
  return (
    <CacheProvider value={muiCache}>
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </MuiThemeProvider>
    </CacheProvider>
  );
};

export default ThemeProvider;

[garronej]

I can't puzzle how mui manages tout pick up the tss cache...
Your provider looks fine...
Are you sure you don't have missmatchning version on "@emotion/*"?
If you can link me the repo or set a playground up for me I will tell you what's wrong.

[R-154]

I have these versions installed:

• "tss-react": "^3.2.4",
• "@emotion/cache": "^11.7.1"
• "@emotion/react": "^11.7.1",
• "@emotion/styled": "^11.6.0",

[garronej]

Please run:

npm ls @emotion/cache and npm ls tss-react

[R-154]

cache:

tss-react:

[garronej]

Are you problems happening in storybook?

[R-154]

Not only in storybook. Also in the application.

[garronej]

If yes see this warning:

[garronej]

Not only in storybook. Also in the application.

Ok then, everything should work.
Link me your repo or reproduce in a playgroud like codeSandbox or stackblitz.

[garronej]

Now that I think of it, it's @emotion/react that should be confirmed deduped.

Please run:

[R-154]

I think thats ok:

I now added cx instead of cn (from classnames) to my typography component (which uses MUI).
Now most (not all) of the styling is applied correct.

should i see different prefixes?

[garronej]

I now added cx instead of cn (from classnames) to my typography component (which uses MUI).
Now most (not all) of the styling is applied correct.

Yes, that's it. cx is not just a utility like cn is, it is reordering/merging styles in the header based on the order it receives classes.

Should I see different prefixes?

I don't know! You make me play guessing game by not showing me any of your code. I could have told you right away that cn was the problem if you had shown me what you wrote.

Closing now, I won't reopen unless you provide me with a repo or a playground. I am here for you but please respect my time.