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/@emotion+react@11.11.4_@types+react@18.2.48_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at ButtonBase (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+material@5.15.16_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/ButtonBase.js:137:84)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.48_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at ListItemButton (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+material@5.15.16_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ListItemButton/ListItemButton.js:141:85)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.48_react@18.2.0/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/@emotion+react@11.11.4_@types+react@18.2.48_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at List (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+material@5.15.16_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/List/List.js:76:84)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.48_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/Stack/createStack.js:172:28)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.48_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/Stack/createStack.js:172:28)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@emotion+react@11.11.4_@types+react@18.2.48_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at Paper (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+material@5.15.16_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0/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/@emotion+react@11.11.4_@types+react@18.2.48_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:59:70)
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/Unstable_Grid/createGrid.js:99:77)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:242:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:335:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:161:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:152:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:227:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:354:11)
    at RtlProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/RtlProvider/index.js:23:11)
    at ThemeProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+private-theming@5.15.14_@types+react@18.2.48_react@18.2.0/node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:43:13)
    at ThemeProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:61:13)
    at CssVarsProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+system@5.15.15_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/cssVars/createCssVarsProvider.js:65:17)
    at AppRouterCacheProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+material-nextjs@5.15.11_@emotion+cache@11.11.0_@mui+material@5.15.16_@types+react@18.2.48_next@14.1.0_react@18.2.0/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/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/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/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:181:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:536:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/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