Production Build Styling incorrect when using MUI Components in layout.tsx on Next.js

[Adralonter]

Steps to reproduce

1. Open this CodeSandbox
2. Start the Dev Server
3. Build the Project
4. Start Server
5. Open both in preview and see differences

Current behavior

I ran into an issue using Next.js, MUI and pigment-css, where the styles on the production build are incorrect. The cause seems to be using MUI Components directly in the layout.tsx file. It results in MUI Components (both in the layout and the page) to get displayed incorrectly. A workaround would be to use the Header at the top of the page.tsx instead.

On the left is the Dev Server, on the right is the Server with the Build.

Expected behavior

It should be possible to use MUI Components directly in the layout file.

Context

No response

Your environment

npmPackages: @mui/material: ^6.3.1 => 6.3.1 @mui/material-pigment-css: ^6.3.1 => 6.3.1 @pigment-css/nextjs-plugin: ^0.0.29 => 0.0.29 @pigment-css/react: ^0.0.29 => 0.0.29 @types/react: ^19.0.4 => 19.0.4 react: ^19.0.0 => 19.0.0 react-dom: ^19.0.0 => 19.0.0 typescript: ^5.7.3 => 5.7.3

Search keywords: Next.js Build MUI