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

[jbrunner92]

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 🌎

`npx @mui/envinfo`

- 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

[mnajdova]

You should apply the selector styles on the root, as the state classes increase the CSS specificity by design. We cannot remove these keys at this moment as those would be breaking changes, but they are already listed for the changes we need to do in v6.

Also, note the difference in the descriptions. For the other keys, it says "Styles applied on ...", for these, it says "State class applied ...".

[jbrunner92]

OK, that's g2k. Sounds like adding the selector styles in root is the correct way to go about this then. Thanks!