[Docs] emotionCache global selector plugin affects styles

[acomanescu]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

No response

Current behavior 😯

While working with the docs, I noticed that all anchors and buttons have a box-shadow on hover. Doing some investigation I discovered that emotion custom plugin removes component class selector & and propagates the styles to global scope.

The plugin is transforming:

.css-uk1x50-MuiPaper-root:is(a, button) {
  &:hover: {
    boxShadow: 0px 4px 20px rgba(170, 180, 190, 0.3)
  }
}

into

:is(a, button) {
  &:hover: {
    boxShadow: 0px 4px 20px rgba(170, 180, 190, 0.3)
  }
}

This should be fixed, because while debugging I've observed that there are multiple styles propagating to the global scope.

Expected behavior 🤔

I expect the CSS selectors to remain unchanged.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 13.3.1
  Binaries:
    Node: 20.0.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Edge: Not Found
    Firefox: 113.0.1
    Safari: 16.4

[ZeeshanTamboli]

Thanks for reporting. We are already aware of this and it will be fixed in #37362.