[Checkbox][Radio] Option to disable hover effect for checkbox, switch, and radio

• I have searched the issues of this repository and believe that this is not a duplicate. (There was a somewhat related issue but I believe circumstances have since changed)

Summary 💡

My use case is a little tricky so I’d love some input on what you folks have seen and what would be most useful here.

In my case, I’m using the disableRipple option on MuiButtonBase in my theme. While upgrading to v4, we noticed that the checkbox, switch, and radio components now have a halo effect on hover. Normally this would fit right in, but when ripples are disabled, it feels out of place.

It’s only an issue with components whose hover is a halo rather than just a background change like buttons have.

The workaround is simple enough but I need to apply it to each component individually:

'&&:hover': {
  backgroundColor: 'transparent',
},

I saw that the effect uses theme.palette.action.hoverOpacity, but unfortunately that’s shared by more than just these components (for example, the hover effect for buttons).

The differentiating factor here is components that have a halo effect:

• Is it fair to treat these components differently?
• Can this be a property on these specific components (disableHoverHalo?) or perhaps another theme value that affects only these components?
• Could this be a property on ButtonBase that I would only use on these components?

Totally open to more ideas.

Thanks for your consideration!

Motivation 🔦

I have an acceptable workaround right now, but I’m always a fan of customizations that express intent rather than just override implementation - if the implementation were to change, perhaps in the next major version, this would be another item we’d have to track down and fix. However if this is another property on the component API, it’s more likely to be sustained between versions.

[faan234]

Can I work on this?

[mnajdova]

People who set disableRipple to true might still want to keep the hover style, so I propose that we add a new property “disableHoverStyle” to the Radio component, which will skip default hover styles when is true.

I would propose using disableRipple for now, we don’t really have a use-case for this yet @VinceCYLiao In the end, it is anyway possible to do it with CSS override, so we are trying to add API for the most common use-cases. Feel free to pick this app and follow what’s done in the Checkbox component 😃