How Can I override focusVisible property for a Material UI radio button

Question

I am using Material UI - Radio button

I want to override their focusVisible property where you can apply styles to checkbox on focus via keyboard only

I can target the input and use native focus-visible state and apply styles but it is not well supported in older browsers.

Material UI implemented their own focusVisible state but cannot figure out how to override that. Any suggestions?

Answer 1

Try this:

root: {
    color: 'blue',
    "&.Mui-focusVisible": {
      color: "orange"
    },
  },


Add root class,

<Radio className={classes.root}/>