项目场景:
使用到antd,用/deep/修改antd原本的样式,今天测试人员更新了谷歌版本(89.0.4389.82),样式失效,直接退回原来的样式
问题描述:
样式穿透写法如下(仅几例,.antd-tableS是自写的外部容器):
.antd-tableS /deep/ .ant-table-tbody > tr > td {
border-bottom: 1px solid #065370;
border-right: 1px solid #065370;
color: #fff;
}
.antd-tableS /deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,
.antd-tableS /deep/ .ant-table-tbody .ant-table-row-hover,
.antd-tableS /deep/ .ant-table-tbody .ant-table-row-hover > td {
background: rgba(37, 83, 255, 0.2) !important;
}
原因分析:
发现不管如何使用/deep/,>>>,!important都无法作用到项目里,且使用开发者工具查看元素是样式表里不显示。
解决方案:
经过一番排查,发现去除/deep/就可以实现效果(在全局使用的情况下不加/deep/,若是scoped,则需加/deep/)
.antd-tableS .ant-table-tbody > tr > td {
border-bottom: 1px solid #065370;
border-right: 1px solid #065370;
color: #fff;
}
.antd-tableS .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,
.antd-tableS .ant-table-tbody .ant-table-row-hover,
.antd-tableS .ant-table-tbody .ant-table-row-hover > td {
background: rgba(37, 83, 255, 0.2) !important;
}