Gunjan-vyas
commented
5 days ago 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
Steps to reproduce
Link to live example: https://codesandbox.io/p/github/sawa-ko/nextjs-app-router-mui-bug/draft/sharp-james
Steps:
Current behavior
Currently you get a mismatch error message when using the dark theme, this does not happen with the light theme.
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 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 ```npx @mui/envinfoSearch keywords: mismatch styled, mismatch styled component, styled, styled utility