⬆️Migration v3 -> v4

Upgrade MUI

If you are using MUI you must upgrade @mui/material to v5.10.7 or newer.

Breaking changes

SSR setup

MUI users can now setup SSR as per described in the MUI documentation. Nothing specific to tss-react is required.

// src/pages/_app.tsx

-import type { EmotionCache } from "@emotion/cache";
-import createCache from "@emotion/cache";
-import { CacheProvider } from '@emotion/react';
+import { createEmotionSsrAdvancedApproach } from "tss-react/nextJs";

-let muiCache: EmotionCache | undefined = undefined;
-export const createMuiCache = () => muiCache = createCache({ "key": "mui", "prepend": true });

+const { EmotionCacheProvider, withEmotionCache } = createEmotionSsrAdvancedApproach({ "key": "css" });
+export { withEmotionCache };

 function App({ Component, pageProps }: AppProps) {

   ...

-			<CacheProvider value={muiCache ?? createMuiCache()}>
+			<EmotionCacheProvider>
				<MuiThemeProvider theme={theme}>
					<CssBaseline />
					<Component {...pageProps} />
				</MuiThemeProvider>
-			</CacheProvider>
+			</EmotionCacheProvider>

 );

// src/pages/_document.tsx

import BaseDocument from "next/document";
-import { withEmotionCache } from "tss-react/nextJs";
-import { createMuiCache } from "./_app";
+import { withEmotionCache } from "./_app";

-export default withEmotionCache({
-    "Document": BaseDocument,
-    "getCaches": () => [createMuiCache()]
-});
+export default withEmotionCache(BaseDocument);

useCssAndCx removed

-import { useCssAndCx } from "tss-react";
+import { useStyles } from "tss-react/mui";

-const { css, cx }= useCssAndCx();
+const { css, cx } = useStyles();

useMergedClasses removed

-import { useMergedClasses } from "tss-react";

-let { classes } = useStyles({ "color": "blue" });
-classes = useMergedClasses(classes, props.classes);
+const { classes } = usesStyles({ "color": "blue" }, { props });

-let { classes } = useStyles();
-classes = useMergedClasses(classes, props.classes);
+const { classes } = usesStyles(undefined, { props });

Removing noise

Explicitly providing an emotion cache is still supported but no longer required.

 import { createRoot } from "react-dom/client";
-import { CacheProvider } from "@emotion/react";
-import createCache from "@emotion/cache";
import { ThemeProvider } from "@mui/material/styles";

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

 const container = document.getElementById('app');
 const root = createRoot(container!); 
 root.render(
-    <CacheProvider value={muiCache}>
        <ThemeProvider theme={myTheme}>
            <App />
        </ThemeProvider>
-    </CacheProvider>
);

Having issues?

🆘Fix broken styles after upgrading to MUI v5 with TSS