Search code examples
cssreactjsantd

Change Color of AntD Button (background)

I am aware there are other similar topics on this, but I was wondering how to make my situation work. I have not been able to make it work with available information so far.

I am trying to modify the background color of a Text button when the mouse hovers.

If I change my backgroundColor style inline of the button, it changes the appropriate area entirely. It seems there are no way to add an :hover functionality inline (I am using TS, shows up as an error. Even though it compiles, it has no effect).

If I use a SCSS module, I can change again the whole background color. But if I change the same property with the :hover functionality, it only affects the text part (see screenshot). I've tried targeting more specifically the ant-btn-text, but to no effect still.

Would someone have an idea? I would like to avoid creating a state variable for this.

background color not changing on hover

Edit: added portion of code and CSS as requested in comment enter image description here

Solution

  • AntD classes generally override your own css stying. You can use !important to override that.