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.

Zosima

Answer 1

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.

Tarrah

Thank you this solved it!, I did not need to increase specificity, but the selector did the trick! However even now when I am inspecting them, I dont see background set on the td at all, how can I inspect the td to see the styles being applied, when it depends on tr:hover? – Zosima

If you inspect a particular td in the Inspect tab of chrome browser and select the hover checkbox in the :hov tab on the parent tr, then you can see a background added to the td with a selector like this. .ant-table-tbody>tr.ant-table-row:hover>td – Tarrah

@Zosima if this answer solved your question, mark it as the correct one – Report

Helped me a lot, thank you!! – Fix

Not working through CSS file, not working as the styled component too. Things like text color are changing, except background color. – Cilka

Answer 2

in plain Css you must add td after tr:hover

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

Rapp

Answer 3

This can be done by changing the style of the row and cell of the table

<Table
        dataSource={rowsWithButtonAction}
        columns={columns.map((col) => ({
          ...col,
          sorter: col.sorter || false, // Add sorter property to enable sorting
        }))}
        pagination={false}
        onRow={onRow}
        **rowClassName={rowClassName}**
        onChange={handlePageChange}
        style={{
          marginBottom: "10px",
        }}
        scroll={{ y: `calc(100vh - 300px)` }}
        loading={loading}
      />

First give rowClassName prop to the table component

And in that, you should assign your className to that row I have assigned selected-row

 const rowClassName = (record) => {
return record.userId === "id you selected"
  ? `selected-row ${externalClass ? "custom-pointer" : ""}` //concatenating selected-row with custom-pointer
  : `${externalClass ? "custom-pointer" : ""}`;

};

I am changing the background color of selected-row

 .selected-row {
  background-color: #ecf2f4;
}
.selected-row:hover td {
  background-color: #ecf2f4 !important;
}

The Antd tables apply the hovered bg-color to td as well, so I have changed the styling of td along with the whole row.

I have done it for a specifically selected row, you can do it for each row as well

Hope this works for you! :)

Grig