在 Ant-Design 表格中更改表格行上的悬停颜色

Question

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

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

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

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

类的css在哪里：

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

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

Answer 1

好像背景颜色被应用到了antd表中的td元素，你还需要使用&&操作符增加specificity。 styledTable 组件的更新代码应如下所示。

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

为了测试上述内容，我 fork 了 antd codesandbox 表演示，它似乎可以正常工作。

Answer 2

在纯 Css 中，您必须在 tr:hover 之后添加 td

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