How to change the hover state for CardActionArea / ButtonBase

4
votes

I'm currently using the CardActionArea / ButtonBase Material Ui @next components for my app.

I can't seem to change the onhover effect that comes with the button.

I also can't seem to find the selector that is causing the background overlay color on hover. Can anyone help with this?

https://material-ui.com/api/card-action-area/

https://material-ui.com/api/button-base/

I've tried setting a backgroundColour in the className prop, classes prop (applied to root/focusVisible/focusHighlight) but with no luck.

Demo that might better explain what I'm trying to do: https://codesandbox.io/s/jnnr5wo029

Expected result: onHover style would be overridden / disabled with css

Actual result: Grey onHover style is still applied

1
material-ui

1 Answers

7
votes

Looking at the source code focusHighlight has opacity applied to it on hover. You can override this to remove the hover effect e.g. https://codesandbox.io/s/j3zw9w7yk9