Steps to reproduce
Use the enableCssLayer feature (tested with Vite).
Steps:
- Open this link to live example: https://stackblitz.com/edit/github-4z1fexzd?file=src%2FApp.tsx
- Open the browser dev tools and inspect the span within the button
Current behavior
The CSS class .css-r3djoj-MuiTouchRipple-root exists twice
- Once with styles and the mui layer, as expected
- Once without any styles and without the
mui layer
Expected behavior
- No duplicated CSS classes
- All MUI styles have the "mui" layer
Context
I'm trying to introduce a CSS layer to wrap all MUI styling to enable easier overrides, as described here: https://mui.com/material-ui/customization/css-layers/#vite-or-any-other-spa.
The issue seems to occur in most components but only for a small portion of the styles.
There seems to be no visual or specificity issue, since the duplicates are empty. Nevertheless, I would like to avoid the duplicates, because they spam the styles tab and are difficult to trace.
The above reproduction uses the latest version, but we face the same issue with MUI v5.
I suspect the root cause could be related to emotion. But because I'm following the above MUI guide, I would expect this issue to also be addressed here or in the guide. Either way, I appreciate any pointer in the right direction.
Your environment
npx @mui/envinfo
From Stackblitz reproduction:
System:
OS: Linux 5.0 undefined
Binaries:
Node: 20.19.1 - /usr/local/bin/node
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: latest => 11.14.0
@emotion/styled: latest => 11.14.1
@mui/core-downloads-tracker: 7.3.2
@mui/icons-material: latest => 7.3.2
@mui/material: latest => 7.3.2
@mui/private-theming: 7.3.2
@mui/styled-engine: 7.3.2
@mui/system: 7.3.2
@mui/types: 7.4.6
@mui/utils: 7.3.2
@types/react: latest => 19.1.13
react: latest => 19.1.1
react-dom: latest => 19.1.1
typescript: latest => 5.9.2
Tested using Google Chrome 140 and Firefox 142.
Search keywords: enableCssLayer, @layer mui, duplicated styles, empty styles, css layers, cascade layers
Steps to reproduce
Use the enableCssLayer feature (tested with Vite).
Steps:
Current behavior
The CSS class
.css-r3djoj-MuiTouchRipple-rootexists twicemuilayerExpected behavior
Context
I'm trying to introduce a CSS layer to wrap all MUI styling to enable easier overrides, as described here: https://mui.com/material-ui/customization/css-layers/#vite-or-any-other-spa.
The issue seems to occur in most components but only for a small portion of the styles.
There seems to be no visual or specificity issue, since the duplicates are empty. Nevertheless, I would like to avoid the duplicates, because they spam the styles tab and are difficult to trace.
The above reproduction uses the latest version, but we face the same issue with MUI v5.
I suspect the root cause could be related to emotion. But because I'm following the above MUI guide, I would expect this issue to also be addressed here or in the guide. Either way, I appreciate any pointer in the right direction.
Your environment
npx @mui/envinfoFrom Stackblitz reproduction:
System:
OS: Linux 5.0 undefined
Binaries:
Node: 20.19.1 - /usr/local/bin/node
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: latest => 11.14.0
@emotion/styled: latest => 11.14.1
@mui/core-downloads-tracker: 7.3.2
@mui/icons-material: latest => 7.3.2
@mui/material: latest => 7.3.2
@mui/private-theming: 7.3.2
@mui/styled-engine: 7.3.2
@mui/system: 7.3.2
@mui/types: 7.4.6
@mui/utils: 7.3.2
@types/react: latest => 19.1.13
react: latest => 19.1.1
react-dom: latest => 19.1.1
typescript: latest => 5.9.2
Tested using Google Chrome 140 and Firefox 142.
Search keywords: enableCssLayer, @layer mui, duplicated styles, empty styles, css layers, cascade layers