Material UI – Global checkbox focus styling (not locally)

Question

Trying to alter styling of checkbox when it is focused at a global level using Material-UI (react).

At the moment only default and hover styling is working:

Answer 1

its either a problem with specificity or you just need to add the classes you made to your component

const styles = {
  root: {
    '&$disabled': {
      color: 'white',
    },
  },
  disabled: {},
};

compiles to:

.root-x.disable-x {
  color: white;
}

⚠️ You need to apply the two generated class names (root & disabled) to the DOM to make it work.

i get this from the documentaiton

https://material-ui.com/customization/components/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet