search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
91.86k stars 31.57k forks source link

[material-ui] Duplicate class names for components #42103

Open xettri opened 2 weeks ago

xettri commented 2 weeks ago

Steps to reproduce

MUI-5

I've noticed duplicate class names being added to components, such as MuiButton-root, MuiButton-contained, MuiButton-containedPrimary, MuiButton-sizeMedium, MuiButton-containedSizeMedium and MuiButton-colorPrimary. This duplication occurs within the HTML elements, like the button example below. I'm unsure whether this is a bug or expected behavior. Can you clarify whether this duplication is intentional? Similar we can see in almost all component like Checkbox, Select etc

<button
  class="MuiButtonBase-root MuiButton-root MuiButton-contained
    MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium
    MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary
    MuiButton-sizeMedium MuiButton-containedSizeMedium
    MuiButton-colorPrimary css-1hw9j7s"
  tabindex="0"
  type="button"
>
  Contained<span class="MuiTouchRipple-root css-w0pj6f"></span>
</button>

Link to live example: This can be seen in MUI-5 doc pages as well https://mui.com/material-ui/react-button/

Current behavior

Duplicates values of classes in html

Expected behavior

No duplicate values should be there (if they are not intentionally added)

Your environment

npx @mui/envinfo ``` System: OS: macOS 13.1 Binaries: Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm pnpm: 8.15.6 - ~/.nvm/versions/node/v16.20.0/bin/pnpm Browsers: Chrome: Not Found Edge: Not Found Safari: 16.2 npmPackages: @types/react: ^18.2.47 => 18.2.65 typescript: ^5.3.3 => 5.4.2 ```

Search keywords: Duplicate class