文章/答案/技术大牛

发布

社区首页 >问答首页 >在Ant-Design表格中更改表格行的悬停颜色

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

Stack Overflow用户

提问于 2021-09-26 13:28:24

回答 1查看 1.6K关注 0票数 3

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

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);
}

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

回答已采纳

发布于 2021-09-26 18:24:05

背景颜色似乎应用于antd表中的td元素，而且您还需要使用&&运算符来增加specificity。对于styledTable组件，更新后的代码应该如下所示。

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

为了测试上面的功能，我使用了antd codesandbox表演示程序，它似乎可以正常工作。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69335398

复制

相似问题

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