Mistmatch error when using styled function with mui components

[sawa-ko]

Steps to reproduce

Link to live example: https://codesandbox.io/p/github/sawa-ko/nextjs-app-router-mui-bug/draft/sharp-james

Steps:

1. Custom style a @mui/material component with styled function utility
2. Visit page (/home) (no errors)
3. Change to dark schema (/ page)
4. Visit the same page (mismtach errors)

Current behavior

Currently you get a mismatch error message when using the dark theme, this does not happen with the light theme.

 Warning: Prop `className` did not match. Server: "MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters mui-63lg1w-MuiButtonBase-root-MuiListItemButton-root" Client: "MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters mui-1iyupwr-MuiButtonBase-root-MuiListItemButton-root"
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at ButtonBase (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/ButtonBase/ButtonBase.js:137:84)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at ListItemButton (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/ListItemButton/ListItemButton.js:141:85)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at ul
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at List (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/List/List.js:76:84)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@mui/system/esm/Stack/createStack.js:172:28)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@mui/system/esm/Stack/createStack.js:172:28)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at Paper (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/Paper/Paper.js:87:85)
    at Sidebar (webpack-internal:///(app-pages-browser)/./components/sidebar.tsx:36:76)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@mui/system/esm/Unstable_Grid/createGrid.js:99:77)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:242:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:335:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:161:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:152:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:227:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/layout-router.js:354:11)
    at RtlProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@mui/system/esm/RtlProvider/index.js:23:11)
    at ThemeProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:43:13)
    at ThemeProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:61:13)
    at CssVarsProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@mui/system/esm/cssVars/createCssVarsProvider.js:65:17)
    at AppRouterCacheProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material-nextjs/v13-appRouter/appRouterV13.js:26:13)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/app-router.js:181:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/app-router.js:536:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/app-index.js:145:11)

Expected behavior

To be able to style the component correctly without mismatch errors.

Context

I want the ListItemButton component to have different colors and rounded edges when set to selected.

Your environment

npx @mui/envinfo

$ npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.6 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (124.0.2478.51)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/icons-material: ^5.15.16 => 5.15.16 
    @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ^5.15.16 => 5.15.16
    @mui/material-nextjs: ^5.15.11 => 5.15.11
    @types/react: 18.3.1 => 18.3.1
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    typescript: 5.4.5 => 5.4.5

Search keywords: mismatch styled, mismatch styled component, styled, styled utility

[Gunjan-vyas]

Having same issue, please LMK as well,

Issue is Classname mismatch with the client and server. Every time Mui generates new classname which doesn't match with client side.

I'm following https://mui.com/material-ui/integrations/nextjs/ to start with Nextjs 14 (App router) and Mui v5 project

/app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
import { ThemeProvider } from "@mui/material/styles";
import theme from "@/theme";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
          <ThemeProvider theme={theme}>
            {children}
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

[ZeeshanTamboli]

@sawa-ko I am not able to reproduce the issue in the CodeSandbox you provided. Also, did you take a look at this page: https://mui.com/material-ui/guides/server-rendering/?

[sawa-ko]

Hi @ZeeshanTamboli, thanks for reply, visit the /home route.

[ZeeshanTamboli]

I am opting out to take a look at this issue. Assigning it back to Jun.

[siriwatknp]

@sawa-ko Please upgrade @mui/* to v6. The issue should be fixed.

Note: there is a behavior change, you should revisit the App Router integration guide.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @sawa-ko! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!