Theming: Checkbox indeterminate is not being treated the same as checked/disabled

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When overriding the indeterminate state’s style, is not throwing the same warning/error message as disabled.

Example code:

  MuiCheckbox: {
    styleOverrides: {
      root: {
        '&.Mui-checked': {
          // will tell me to use this instead
          // color: 'rebeccapurple'
        },
      },
      checked: {
        // MUI will throw console error, telling devloppers to use '&.Mui-checked'
        color: 'rebeccapurple'
      },
      indeterminate: {
        color: 'rebeccapueple'
      }
    }
  }

I am greeted with a message such as

MUI: The MuiCheckbox component increases the CSS specificity of the checked internal state.

However, not for indeterminate?

Expected behavior 🤔

indeterminate should be treated the same as checked and disabled, hence should throw the same error message?

Example:

MUI: The MuiCheckbox component increases the CSS specificity of the indeterminate internal state.

The expected behavior is that all of them should behave the same, if for some reason MUI team decided that indeterminate would be treated differently, then I believe you guys should revert the same steps you guys did on the checked and disabled… the theme should override them the same ways.

Steps to reproduce 🕹

See example in Current behavior section

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (16) x64 Intel(R) Xeon(R) Silver 4108 CPU @ 1.80GHz
    Memory: 2.12 GB / 15.33 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 10.24.1 - ~/.config/nvm/versions/node/v10.24.1/bin/node
    Yarn: 1.22.10 - ~/.config/nvm/versions/node/v10.24.1/bin/yarn
    npm: 6.14.15 - ~/projects/gravity/ui-components/packages/ui-components/node_modules/.bin/npm
  Managers:
    Apt: 2.2.4 - /usr/bin/apt
    Maven: 3.6.3 - /usr/bin/mvn
    pip2: 20.3.4 - ~/.local/bin/pip2
    pip3: 20.3.4 - /usr/bin/pip3
  Utilities:
    Make: 4.3 - /usr/bin/make
    GCC: 10.3.0 - /usr/bin/gcc
    Git: 2.30.2 - /usr/bin/git
  Virtualization:
    Docker: 20.10.7 - /usr/bin/docker
  IDEs:
    Nano: 5.4 - /usr/bin/nano
    VSCode: 1.63.1 - /home/eto/.vscode-server/bin/fe719cd3e5825bf14e14182fddeb88ee8daf044f/bin/code
    Vim: 8.2 - /usr/bin/vim
  Languages:
    Bash: 5.1.4 - /usr/bin/bash
    Java: 1.8.0_312 - /usr/bin/javac
    Perl: 5.32.1 - /usr/bin/perl
    Python: 2.7.18 - /usr/bin/python
    Python3: 3.9.5 - /usr/bin/python3
  Browsers:
    Chrome: 96.0.4664.45
    Chromium: 96.0.4664.110
    Firefox: 95.0.1

[siriwatknp]

Which way should we go with right now

You should use classes from the component like this:

import { checkboxClasses } from '@mui/material/Checkbox';

`&.${checkboxClasses.checked}`
`&.${checkboxClasses.disabled}`
`&.${checkboxClasses.indeterminate}`

With this, you don’t have to worry about v5, or v6. It will resolve the correct one in sync with the component.

[michaldudak]

It makes sense to me to make indeterminate a global class (.Mui-indeterminate) because it is a state

👍 I agree. But this is a breaking change, so we’d have to wait for it until v6.