Changing the hover color for Buttons

[Amogh-Bharadwaj]

Is there a way to change hover and selected properties of a Button?
I've tried the sx prop as:
<Button sx={{':hover':{background:'neutral.muted'}}} variant='invisible'>Hello World</Button>
But the hover colour still stays white.
Removing the variant attribute or changing it to other variants yields the same.
Any help would be appreciated, thanks.

[issammani]

Hi @Amogh-Bharadwaj,

This is a specificity issue. This is actually very common with component libraries that allow overriding styles like this. You can use the && operator to increase the specificity of your overriding hover styles like so:

<Button sx={{'&&:hover':{background:'neutral.emphasis'}}}>Hello World</Button>

Here is a working example in codesandbox.

PS: I changed the color from neutral.muted to neutral.emphasis so you can see the difference. The default hover color and neutral.muted are very similar.

[Amogh-Bharadwaj]

Thank you so much!