[Checkbox] Overriding Checkbox styles from theme provider not working

[sabbin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Create a theme
2. Add MuiCheckbox to components
3. Override styles for checked

Current behavior 😯

I want to override the checked and disabled of the CheckBox component as described in the Checkbox API

I have the following code, which is imported in the theme, in the components section. That works fine

import { Components, Theme } from '@mui/material';

export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
  defaultProps: {
    disableRipple: true
  },
  styleOverrides: {
    root: ({ theme }) => ({
      borderRadius: 0
      // Here it works but it will override all of the styles which I don't want
      /* '&.Mui-checked': {
        color: '#ff0000'
      }*/
    }),
    checked: ({ theme }) => ({
      // This doesn't work
      color: '#ff0000'
    })
  }
};

The checked does not work in my example. I don't get the desired result, the color should be #ff0000 in this case. But it's still the theme.primary

In the root with &.Mui-checked it works.

Expected behavior 🤔

Selectors for checked should work as well.

The checked should be able to set the style

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Tested on Chrome, Edge, Opera - not related to browser
  System:
    OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: 11.9.3 => 11.9.3
    @emotion/styled: 11.9.3 => 11.9.3
    @mui/core-downloads-tracker:  5.10.8
    @mui/icons-material: 5.8.4 => 5.8.4
    @mui/material: 5.10.8 => 5.10.8
    @types/react: 17.0.3 => 17.0.3
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: 4.3.5 => 4.3.5

[akshaya-venkatesh8]

Is this issue up for grabs? Please may I work on it?

[mnajdova]

The checked should be removed from the styleOverrides. It is specified on the API page - https://mui.com/material-ui/api/checkbox/ that it is a "state class", this is why you need to bump the specificity in order to override the styles. See https://mui.com/material-ui/customization/how-to-customize/#state-classes for more info on this.

The problem is that we are using the same types for the classes & style overrides, which is not correct when state classes are in question. I am adding this in the v6 milestone, as it is a breaking change that will affect more components.