LogoLogo
HomeGitHubPlayground
v4
v4
  • 🔧Setup
  • 🔍API References
    • tss - the Modern API
    • keyframes
    • <GlobalStyles />
    • makeStyles -> useStyles
    • withStyles
  • ⚡SSR
    • Next.js
    • Gatsby
    • Other backends
  • 🎯Increase specificity
  • 🦱classes overrides
  • 🧹Detecting unused classes
  • 💽Emotion Cache
  • 💫Nested selectors (ex $ syntax)
  • 🍭MUI Global styleOverrides
  • 📦Publish a module that uses TSS
  • 🩳MUI sx syntax
  • 📲React Native
  • 🆘Fix broken styles after upgrading to MUI v5 with TSS
  • ⬆️Migration v3 -> v4
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub

Fix broken styles after upgrading to MUI v5 with TSS

PreviousReact NativeNextMigration v3 -> v4

Last updated 8 months ago

Was this helpful?

You upgraded to MUIv5 using tss-react but the somme styles doesn't apply the same way they uses to?

You can fix the indivudual problems but it's a very time consuming process.

Setting up emotion like that will probably fix all your issues:

import React from "react";
import ReactDOM from "react-dom/client";
import { CacheProvider } from "@emotion/react";
import { TssCacheProvider } from "tss-react";
import createCache from "@emotion/cache";
import App from "./App";

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

const tssCache = createCache({
    key: "tss"
});

ReactDOM.createRoot(document.getElementById("root")!).render(
    //NOTE: Don't use <StyledEngineProvider injectFirst/>
    <CacheProvider value={muiCache}>
        <TssCacheProvider value={tssCache}> 
            <App />
        </TssCacheProvider>
    </CacheProvider>
);

Why and how does it work?

In theory, when TSS and MUI uses the same emotion cache, the styles that you provide via className or classes should always take priority over MUI's default styles.

By explicitly telling MUI to use one cache and TSS to use another and by making sure the MUI styles are injected before in the <head /> (prepend: true) you ensure that TSS-generated styles always overwrite MUI's default styles.

Link to the setp instruction: .

If your issues are fixed by doing this, please so I can address the root cause of the problem by issuing a PR on the MUI repo.

It's almost always the case but in involving media queries on the MUI side, it isn't.

You always have the option to artificially increase the specificity with or using !important but if you are just upgrading to MUI v5 you probably don't want to spend hours troubleshooting issues one by one.

🆘
increasing specificity with &&
Make MUI and TSS use different caches
open an issue about it
some edge cases
&&