Search code examples
reactjsantd

Change hover color on Table Rows in Ant-Design Table

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.

Solution

  • Seems like the background color is applied to td element in antd table and also you need to increase the specificity by using the && operator. The updated code should look something like this for the styledTable component.

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

    To test the above, I forked the antd codesandbox table demo and it seems to be working.