Next.js

Users of MUI: The MUI team now provides a dedicated package for easing up the integration with Next: @mui/material-nextjs. You can use it instead of the TSS tooling documented below. In any case you should use one (@mui/material-nextjs) or the other (tss-react/next) but not both!

Single emotion cache (recommended approach)

This is the recommended approach.

app/layout.tsx

import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";

export default function Layout({ children }: { children: React.ReactNode; }) {
    return (
        <html>
            {/* It's important to keep a head tag, even if it's empty */}
	    <head></head> 
	    <body>
		<NextAppDirEmotionCacheProvider options={{ key: "css" }}>
		    {children}
		</NextAppDirEmotionCacheProvider>
	    </body>
	</html>
    );
}

As it stands, Emotion is currently not compatible with ServerComponents, which, as a result, also makes MUI incompatible. Consequently, any component where you use TSS must be labelled with the "use client" directive.

It's important to note, however, that server-side rendering is indeed functional. The difference lies in the fact that the components will be rendered on both the backend and frontend, as opposed to being rendered solely on the backend.

You can keep track of Emotion's developing support for ServerComponents at this link. In the interim, if you wish to utilize ServerComponents at present, you can implement the following approach.

Require Next.js 12.1.7 or newer.

yarn add @emotion/server

pages/_app.tsx

import { createEmotionSsrAdvancedApproach } from "tss-react/next/pagesDir";
import type { AppProps } from "next/app";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Head from "next/head";

const { augmentDocumentWithEmotionCache, withAppEmotionCache } =
  createEmotionSsrAdvancedApproach({ key: "css" });

export { augmentDocumentWithEmotionCache };

const theme = createTheme({
  palette: {
    mode: "light",
    primary: {
      main: "#32CD32", //Limegreen
    },
  },
});

function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

export default withAppEmotionCache(App);

pages/_document.tsx

import Document from "next/document";
import { augmentDocumentWithEmotionCache } from "./_app";

//You can also pass your custom document if you have one. 
augmentDocumentWithEmotionCache(Document);

export default Document;

Make MUI and TSS use different caches

If you want TSS and MUI to use different caches you can implement this approach. This is mainly usefull if you are migrating from MUI v4 using TSS and some styles don't display like they used to.

app/layout.tsx

import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
import { TssCacheProvider } from "tss-react";

export default function RootLayout({ children }: { children: JSX.Element }) {
    return (
        <html>
            <head></head>
            <body>
                <NextAppDirEmotionCacheProvider options={{ "key": "mui" }}>
                    <NextAppDirEmotionCacheProvider
                        options={{ "key": "tss" }}
                        CacheProvider={TssCacheProvider}
                    >
                        <AppMuiThemeProvider>
                            {children}
                        </AppMuiThemeProvider>
                    </NextAppDirEmotionCacheProvider>
                </NextAppDirEmotionCacheProvider>
            </body>
        </html>
    );
}

yarn add @emotion/server

pages/_app.tsx

import type { AppProps } from "next/app";
import { createEmotionSsrAdvancedApproach } from "tss-react/next/pagesDir";
import { TssCacheProvider } from "tss-react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Head from "next/head";

const {
  augmentDocumentWithEmotionCache: augmentDocumentWithEmotionCache_mui,
  withAppEmotionCache: withAppEmotionCache_mui,
} = createEmotionSsrAdvancedApproach({ key: "mui", prepend: true });

export { augmentDocumentWithEmotionCache_mui };

const {
  augmentDocumentWithEmotionCache: augmentDocumentWithEmotionCache_tss,
  withAppEmotionCache: withAppEmotionCache_tss,
} = createEmotionSsrAdvancedApproach({ key: "tss" }, TssCacheProvider as any);

export { augmentDocumentWithEmotionCache_tss };

const theme = createTheme({
  palette: {
    mode: "light",
    primary: {
      main: "#32CD32", //Limegreen
    },
  },
});

function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

export default withAppEmotionCache_mui(withAppEmotionCache_tss(App));

pages/_document.tsx

import Document from "next/document";
import { 
   augmentDocumentWithEmotionCache_mui,  
   augmentDocumentWithEmotionCache_tss
} from "./_app";

augmentDocumentWithEmotionCache_mui(Document);
augmentDocumentWithEmotionCache_tss(Document);

export default Document;

PreviousSSR NextGatsby

Last updated 7 months ago

Was this helpful?

hashtagSingle emotion cache (recommended approach)

hashtagMake MUI and TSS use different caches

Single emotion cache (recommended approach)

Make MUI and TSS use different caches