Latest 5.10.7 Causes duplicate classes in snapshots

[httpete]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. upgrade to 5.10.7 from 5.10.6

Current behavior 😯

            >
              Sprite Icons
            </h2>
            <label
    -         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-shrink MuiFormLabel-colorPrimary emotion-120"
    +         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-shrink emotion-120"
              data-shrink="true"
              id="demo-simple-select-label"
            >

### Expected behavior 🤔

Take a look, the classes like MuiInputLabel-root are getting doubled up.

### Context 🔦

Jest snapshots should match without duplicate classes.

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>
jest
</details>

[mnajdova]

@httpete can you share the component that was rendered in the test in a Sandbox?

[httpete]

It's a Mui/InputLabel

[mnajdova]

Can't see it duplicated in this sandbox - https://codesandbox.io/s/inspiring-rumple-gt7jxf?file=/src/App.tsx please share the code that generated this output.

[oxc]

I think that sandbox uses 5.0.0 of @mui/material. If I pick 5.10.7, I can reproduce it:

https://codesandbox.io/s/serene-mendel-iy02fz

[httpete]

We reproduced it: https://codesandbox.io/s/mui-input-label-classname-counter-mcp55q?file=/src/App.tsx

[httpete]

Just want to stress that it works fine in 5.10.6.

[vincentducorps]

Same for:

• MuiBadge

• MuiButton

We have a clue here, Base in class names has been removed.

[YuLingCheng]

I had the same issue on Button, Radio, Checkbox. Checked the demos on mui and I could see duplicate classes as well

[lpolito]

This is still a problem as of v5.12.0, and is still demonstrated in the MUI demos. Any updates?

[kevinpfox]

As lpolito said, issue reproducible in demo files, below is from material-next-ts demo

Human readable version of the issue...

<a
  class="
    MuiButtonBase-root

    MuiButton-root
    MuiButton-contained
    MuiButton-containedPrimary
    MuiButton-sizeMedium
    MuiButton-containedSizeMedium

    MuiButton-root
    MuiButton-contained
    MuiButton-containedPrimary
    MuiButton-sizeMedium
    MuiButton-containedSizeMedium

    mui-style-zzzk6x-MuiButtonBase-root-MuiButton-root
  "

  tabindex="0"
  href="/"
>

  Go to the home page

  <span
    class="
      MuiTouchRipple-root
      mui-style-8je8zh-MuiTouchRipple-root">
  </span>

</a>

Issue visible in our own project with "@mui/material": "5.12.1"

Issue slows up in both dev and production builds of project.

[sag1v]

Hi, is this issue being worked on? Is there something we can do to help with the progress?

[mitoihs]

It's still an issue in @mui@5.14.7

[kevinpfox]

This is still an issue with the latest MUI library versions and it affects production builds.

Screen caps below taken, with our project using the following library versions: LATEST EMOTION "@emotion/cache": "11.11.0", "@emotion/react": "11.11.1", "@emotion/server": "11.11.0", "@emotion/styled": "11.11.0", LATEST MUI "@mui/lab": "5.0.0-alpha.150", "@mui/material": "5.14.15",

Please address this issue so HTML isn't bloated with a duplicate set of class names.

Human readable list of class names from above screen cap ^^

[lpolito]

@mnajdova I was wondering if this was on anyone's radar?

[BRAiNCHiLD95]

So this is still definitely an issue. 😞

For me, any custom classes added via "classes" prop also seem to be duplicated in most cases (I use some tailwindCSS overrides).