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?

Chechout this page:
Copy link
Edit on GitHub
On this page
Upgrade MUI
Breaking changes
SSR setup
useCssAndCx removed
useMergedClasses removed
Removing noise
Having issues?