Next.js Hydration Mismatch (style={{}}) on <body> with MUI & Pigment CSS #46189
Description
Steps to reproduce
Hi,
I'm encountering a persistent hydration error in a Next.js (App Router) project using Material UI with Pigment CSS. The error specifically points to a mismatch for the style attribute on the <body> tag: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client.
<body
className="light" // or "dark"
+ style={{}}
- style={{}}
>
This indicates that both the server-rendered HTML and the client-side React expect/render style={{}} (which translates to style=""), yet a hydration mismatch is still reported.
Observations:
Occurs in Official Example: I was able to reproduce this exact same hydration error by cloning and running the official material-ui-pigment-css-nextjs-ts example from the MUI repository: https://github.com/mui/material-ui/tree/master/examples/material-ui-pigment-css-nextjs-ts
Configuration:
Next.js (latest, e.g., 14.x or 15.x) with App Router.
@mui/material
@pigment-css/nextjs-plugin and @mui/material-pigment-css.
theme.cssVariables.colorSchemeSelector is set to 'class'.
The theme class (light or dark) is applied to the tag via a client component (App.js) that renders the .
CssBaseline is used within the .
Workaround: The only way I've found to suppress this error is by adding suppressHydrationWarning={true} directly to the tag within the client component responsible for rendering it.
Expected Behavior:
There should be no hydration mismatch when the server and client ostensibly render the same attributes for the tag.
Actual Behavior:
A hydration error for the style attribute on is consistently reported.
This issue seems to suggest a subtle discrepancy in how the style attribute on the tag is handled or perceived during the hydration process when Pigment CSS is involved with MUI in a Next.js App Router setup. The fact that it's reproducible in the official example is noteworthy.
Could you please look into this? Let me know if any more information is needed.
Thanks!
Search keywords: Hydration, PigmentCSS, Next.js