title: Material UI – Global checkbox focus styling (not locally)
body: <p>Trying to alter styling of checkbox when it is focused at a global level using Material-UI (react).</p>
  
  <p>At the moment only default and hover styling is working:</p>
  
  <pre><code>MuiCheckbox: {
    colorSecondary: {
      color: 'green',
      '&amp;:hover': {
        color: 'blue !important',
        border: '1px solid rgba(0,0,0,0.54)',
        outline: '2px auto rgba(19,124,189,.6)'
      }
    },
  }
  </code></pre>
  
  <p>What i'm trying to do, but is NOT working:</p>
  
  <pre><code>MuiCheckbox: {
    colorSecondary: {
      '&amp;$focused': {
        color: 'blue',
        border: '1px solid rgba(0,0,0,0.54)',
        outline: '2px auto rgba(19,124,189,.6)'
      },
      '&amp;$focusVisible': {
        color: 'blue',
        border: '1px solid rgba(0,0,0,0.54)',
        outline: '2px auto rgba(19,124,189,.6)'
      },
    }
  }
  </code></pre>