Working with Tables using antD has been quite an experience. By default, hovering over a Table Row in antD triggers a subtle gray color transition as a highlight. However, I wanted to switch things up and change the color to something different. My attempt at achieving this involved using less:
.ant-table-row {
&:hover {
background-color: blue;
}
}
(Please note that the actual color used is for illustration purposes only.)
Despite my efforts to make the Row turn blue upon hovering, it would only do so momentarily before reverting back to its light gray state...
Upon inspecting the element's CSS through chrome tools, there appeared to be no other conflicting :hover CSS properties aside from the customized blue color I had set. Strangely enough, the desired effect was still not taking place.
I also experimented with utilizing rowClassName to assign a custom class and applying it along with &:hover, but encountered the same frustrating outcome.
To further visualize the issue, here's a gif demonstration: https://i.sstatic.net/ZVPpP.gif
You can also access a live example of the problem via this link: https://codesandbox.io/s/bold-cache-w22lg?file=/src/App.js