如何解决Ant Design Table自定义行悬停背景色被默认样式覆盖的问题

根本原因 #

Ant Design Table的默认行悬停背景样式绑定在td节点上，对应默认选择器为tbody > tr:hover > td，优先级高于你绑定在tr节点上的自定义样式，所以会出现自定义颜色短暂显示后被默认样式覆盖的问题。

方案1：适配styled-components封装写法 #

修改选择器对准tr下的td节点，可按需添加!important提升优先级：

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

方案2：适配普通CSS+自定义类名写法 #

同样调整选择器层级即可：

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

Ant Design v5专属优化方案 #

如果使用的是Ant Design v5版本，可以直接通过主题token配置全局/单组件的悬停背景色，无需自定义CSS：

import { ConfigProvider } from 'antd';

<ConfigProvider
  theme={{
    components: {
      Table: {
        rowHoverBg: 'rgba(224, 248, 232, 1)',
      },
    },
  }}
>
  {/* 你的业务组件 */}
</ConfigProvider>

内容的提问来源于stack exchange，提问作者Darkbound