在 Ant-Design Table 中更改 Table 行的悬停颜色

Question

我试图在鼠标悬停在行上时设置背景颜色，我尝试了几种方法，一种使用样式化组件，为 table 本身设置样式：

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

这几乎可以工作，当我将鼠标悬停在一行上时，首先我看到我设置的颜色，然后它立即变回默认值，因此它在我的浅绿色和默认的 antd 颜色之间转换。当我检查样式中的行时，我什至找不到它们的颜色。

我尝试的第二种方法是使用普通 css 和 class 名称：

其中 class 的 css 是：

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

结果还是一样，首先是我的颜色，然后过渡到默认颜色。

Answer 1

antd table 中的 td 元素似乎背景色被应用了，而且您还需要使用 && 运算符增加 specificity 。对于 styledTable 组件，更新后的代码应该看起来像这样。

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

为了测试上面的内容，我 fork 了 antd codesandbox table 演示，它似乎可以工作。

Answer 2

简单来说 Css 你必须在 tr:hover

之后添加 td

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

Change hover color on Table Rows in Ant-Design Table