Duplicate Button/ButtonBase classNames starting from @mui/material v5.10.7 onwards

[pachuka]

Duplicates

• I have searched the existing issues

Maybe related #33332

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

as expected:
MUI 5.10.6 sandbox

problematic:
MUI 5.10.7 sandbox
MUI latest sandbox from docs

diff of <Button> component
5.10.6 on left, 5.10.7 on right

Steps:

1. Upgrade @mui/material to any version newer than 5.10.6

Current behavior 😯

Duplicated root styles are applied to Button and possibly other components.

EDIT: I do see this occurring with the other components such as Checkbox, Radio. I understand that Emotion does do eager injection of classNames, so maybe this is expected behavior. I just wanted to confirm that was the case. If it is, are there any recommendations/methods to post-process via babel/webpack to remove the duplicate injected styles?

Expected behavior 🤔

No duplicate root styles.

Context 🔦

I suspect it's coming from the changes in #34451 and may also be happening with other components. I don't see anything visually problematic but the DOM does increase in size due to the duplicated classNames being injected.

Your environment 🌎

npx @mui/envinfo

Issue occurs on all browsers

  System:
    OS: macOS 13.1
  Binaries:
    Node: 14.21.2 - ~/.nvm/versions/node/v14.21.2/bin/node
    Yarn: Not Found
    npm: 6.14.17 - ~/.nvm/versions/node/v14.21.2/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Edge: 109.0.1518.49
    Firefox: 108.0.2
    Safari: 16.2
  npmPackages:
    @emotion/react: 11.10.5 => 11.10.5 
    @emotion/styled: 11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.113 
    @mui/core-downloads-tracker:  5.11.4 
    @mui/icons-material: 5.11.0 => 5.11.0 
    @mui/lab: 5.0.0-alpha.115 => 5.0.0-alpha.115 
    @mui/material: 5.10.6 => 5.10.6 
    @mui/private-theming:  5.11.2 
    @mui/styled-engine:  5.11.0 
    @mui/styles: 5.11.2 => 5.11.2 
    @mui/system:  5.11.4 
    @mui/types:  7.2.3 
    @mui/utils:  5.10.16 
    @mui/x-date-pickers: 5.0.13 => 5.0.13 
    @types/react: 18.0.26 => 18.0.26 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 4.9.3 => 4.9.3 

[michaldudak]

Duplicate of #34502

[pachuka]

@michaldudak ah sorry! I didn't do a good job of searching apparently, will keep an eye on the other ticket. Thank you!