修改ant-design表格hover的颜色

时间:2024-03-18 19:26:36

修改ant-design表格hover的颜色

这是最后的效果图。这个地方比较令人迷惑的地方是你以为它是一行的背景色。其实是每个单元格的背景色,但是背景色的改变是这一行hover的时候。

修改ant-design表格hover的颜色

选中一行勾选hover状态,你发现背景色变了,但是却找不到对应的css样式。这个地方令我困惑了很久。差点以为有些样式可能不在浏览器中显示(这是个误区,请坚信所有的样式最终是要在浏览器中显示的)。然后去看子元素的时候,才恍然大悟。原来样式的改变在这里。看下图

修改ant-design表格hover的颜色

看到了一串很长的选择器:.card-style .ant-card-body .ant-table .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td。这里控制着他的背景色。接下来就直接把这串复制到代码里覆盖一下。大功告成。

tr:hover:not(.ant-table-expanded-row)不过这里从来没有见过这种用法,这里记录一下:not() 匹配不符合一组选择器的元素,就是当元素有ant-table-expanded-row样式的时候,不会触发这个hover的样式。