Mui v5 component classes always take precedence

Hi @garronej

First of all - thank you so much for your work - I was really worried about the direction of MUI’s styling for v5.

Trying to implement tss-react as my team has moved to migrated to mui v5 but having a lot of trouble. I’ve been reading your documentation, the mui migration guide, issues, everything I can, but I’ve yet to successfully apply tss-react properly. I believe I have most things set up properly, as the styles generated are correct, but the ultimate problem is order/specificity. MUI v5 styles are the same specificity of tss-react generated ones and come after, therefore they always override what tss generates on components.

My relevant configuration:

makeStyles.ts

import { createMakeStyles } from 'tss-react';

import theme from '$src/theme';

function useTheme() { return theme; }

export const { makeStyles, useStyles } = createMakeStyles({ useTheme });

index.tsx

import { CacheProvider } from '@emotion/react';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import { render } from 'react-dom';
import createCache from 'tss-react/@emotion/cache';

import Root from '$components/Root';
import theme from '$src/theme';

export const muiCache = createCache({
  key: 'mui', // all material ui classes start with 'css' instead of 'mui' even with this here
  prepend: true,
});

render(
  <CacheProvider value={muiCache}>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Root />
    </ThemeProvider>
  </CacheProvider>,
  document.getElementById('root')
);

An example of how I’m using it in a component:

Banner.tsx

import { Typography } from '@mui/material';
import React from 'react';

import useStyles from './styles';

export default function Banner(): JSX.Element {
  const { classes } = useStyles();

  return (
    // no problems here
    <div className={classes.banner}>
      // two classes here, ".css-XX-MuiTypography-root" and ".tss-XX" but the former wins by order
      <Typography className={classes.text}>
        Banner
      </Typography>
    </div>
  );
}

styles.ts

import { makeStyles } from '$src/makeStyles.ts';

export default makeStyles()((theme) => ({
  banner: {
    // styles here applied to a div, everything good
  },
  text: {
    // styles here conflict with mui styles coming from ".css-XX-MuiTypography-root"
  }
});

I don’t know what I’m missing. Unfortunately it’s a bit difficult for me to make a workable copy as my code is on another system. I will do my best to explain more if needed.

[garronej]

[chazsolo]

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

You were spot on - this fixed it!