Change hover color on Table Rows in Ant-Design Table

Question

I am trying to set the background color on rows when the mouse is hovering them, I tried a few approaches, one with styled components, styling the table itself:

const StyledTable = styled((props) => <Table {...props} />)`
  & tbody > tr:hover {
    background: rgba(224, 248, 232, 1);
  }
`;

This almost works, when I hover over a row, first I see the color that I have set, and immediatelly after that it changes back to the default, so its transitioning between my light green and the default antd color. I can't even find their color when I inspect the rows in the stylings.

The second way that I tried is with normal css and a class name:

Where the css for the class is:

.custom-row-hover:hover {
  background-color: rgba(224, 248, 232, 1);
}

And the result is the same, again, first my color and then transitions to the default one.

Answer 1

in plain Css you must add td after tr:hover

.custom-row-hover:hover td {background: rgba(224, 248, 232, 1)!important;}