CSS doesn’t override previews call css | antD react

I am working on Tables using antD. By default, whenever you hover a Table Row in antD it gets a slight gray color transition as a highlight. I wish to change the color. I did this using less:

.ant-table-row {
    &:hover {
        background-color: blue;
    }
}

(NOTE: the actual color doesn’t matter. it’s just an example)

Whenever hovering the Row, it becomes Blue, as set, for a slight second and then becomes light gray again…

Checking the element CSS, via chrome tools, there is NO other :hover CSS for that object other than the blue color I added. Yet for some reason, this doesn’t work…

In addition, tried using rowClassName to give a custom class and using it with the &:hover with the same results.

Here’s a gif that shows the issue in action antD table row hover effect issue

Also a working example (online): https://codesandbox.io/s/bold-cache-w22lg?file=/src/App.js

Answer

replace with the following:

.ant-table-row:hover td{
  background-color: blue!important;
}