Duplicated styles in Next.js

[romakh-i]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/brave-rosalind-skg4gj?file=%2Fpages%2Findex.js

I slightly changed the original example with next.js, by adding <Button color="success" sx={{ padding: "2px" }}>.

Steps:

1. Go to live example.
2. Run it in production mode by executing task build and after it - start.
3. Inspect that button in DevTools.

Current behavior 😯

Styles are duplicated (border-radius, color, 3 times padding).

Expected behavior 🤔

Styles should be combined with no duplicates. I created the same example using material-cra. Running it in production mode results in clean not duplicated css.

Context 🔦

This bugs produce duplicate styles which increases resulted css size to be downloaded on client.

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[mnajdova]

This is how emotion combines the classes, depending on whether the extractCriticalToChunks is used (for SSR). I propose opening an issue on emotion's repository if you have any doubts/questions about this.

[oliviertassinari]

Similar report in #33126.