更改 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

似乎背景颜色应用于tdantd 表中的元素，并且您还需要使用运算符来增加特异性&&。更新后的组件代码应如下所示styledTable。

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

为了测试上述内容，我分叉了 antdcodesandbox表演示，它似乎工作正常。