Repository: material-ui
Issue: CSS Selector Classes in styleOverrides Error: MUI: The `MuiMenuItem` component increases the CSS specificity of...
Labels: breaking change,package: material-ui

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

Tried defining CSS selector class styles using components.MuiMenuItem.styleOverrides, but I keep getting a browser error regarding increasing the CSS specificity for selectors.
```
MuiMenuItem: {
  styleOverrides: {
    root: {
      ...,
    },
    focusVisible: {
      ...,
    },
    selected: {
      ...,
    },
  },
};
```

![Screen Shot 2022-01-21 at 11 59 09 AM](https://user-images.githubusercontent.com/10749662/150584742-d657082a-eda4-4172-bd13-1a2e8d769ede.png)
![Screen Shot 2022-01-21 at 12 00 09 PM](https://user-images.githubusercontent.com/10749662/150584821-914c7fec-1902-4c2b-82d9-ae3cf1ab914e.png)

I can get around the issue when doing the following, but I don't think this is the ideal approach based on what I've read.

```
MuiMenuItem: {
  styleOverrides: {
    root: {
      [`&.${menuItemClasses.focusVisible}`]: {
        ...,
      },
      [`&.${menuItemClasses.selected}`]: {
        ...,
      }
    }
  }
}
```

### Expected behavior 🤔

<img width="1306" alt="Screen Shot 2022-01-21 at 11 54 46 AM" src="https://user-images.githubusercontent.com/10749662/150584228-98fda4a0-d2c0-41a4-b2f2-a62802fcf98e.png">

According to documentation, these properties should be accessible in components.MuiMenuItem.styleOverrides and should not cause browser errors.

### Steps to reproduce 🕹

Steps:

1. Attempt to apply styleOverrides to MenuItem focusVisible and selected classes directly instead of under root while using TS
2. Check Browser for error when loading MenuItems


### Context 🔦

I can work around this issue by applying the selector styles directly in root, but then I am using more string-based properties. It's also bothersome when implementation does not match specification/documentation. I did find a workaround, but I don't think it's the correct approach, as it creates more noise in the code by involving interpolated string props.

### Your environment 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

```
- Using Chrome
- Also working with Typescript
System:
    OS: macOS 11.6.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 100.88 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node
    npm: 7.19.1 - ~/.nvm/versions/node/v16.6.0/bin/npm
  Managers:
    Homebrew: 3.0.5 - /usr/local/bin/brew
    pip3: 21.0.1 - /usr/local/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.30.2 - /usr/local/bin/git
    Clang: 12.0.0 - /usr/bin/clang
  Servers:
    Apache: 2.4.51 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.5 - /usr/local/bin/docker
    VirtualBox: 6.1.30 - /usr/local/bin/vboxmanage
  IDEs:
    IntelliJ: 2021.3
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 5.1.4 - /usr/local/bin/bash
    Java: 1.8.0_232 - /usr/bin/javac
    Perl: 5.30.2 - /usr/bin/perl
    PHP: 7.3.29 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.9.2 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
    Scala: 2.13.5 - /usr/local/bin/scalac
  Databases:
    SQLite: 3.32.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 96.0
    Safari: 15.2
```
</details>