Duplicated styles in Next.js

Duplicates

• I have searched the existing issues

Latest version

• 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 🌎

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