CSS Selector Classes in styleOverrides Error: MUI: The `MuiMenuItem` component increases the CSS specificity of...

Duplicates

• I have searched the existing issues

Latest version

• 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: {
      ...,
    },
  },
};

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 🤔

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 🌎

- 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

Start with the MuiMenuItem styleOverrides documentation and reproduce the reported focusVisible and selected overrides in a current MUI example. Compare the documented class selectors with the browser specificity error and the root-level workaround; done means the documented overrides work without the error or the documentation clearly explains the required selector form.