将angular-cdk表与bootstrap 4一起使用

Question

我正在使用Angular CDK表（无Angular Material2），并希望使用引导表设计来设置其样式。

这是可能的类添加到CDK表，但bootsstrap规则直接解决了HTML表格元素tr，td......和角度CDK使用自定义标签cdk-table，cdk-row，cdk-cell...

作为快速而肮脏的解决方案，我为cdk元素编写了自己的规则，并从引导源中粘贴了很多副本。但是，有没有一个很好的，也许是更未来证明的解决方案，可以自动继承CDK表的引导程序规则？

Answer 1

我使用 sass 版本的 bootstrap 并为 cdk-table 添加以下样式获得了良好的结果：

.cdk-table { display: table; @extend table; }
.cdk-header-row { display: table-row; @extend thead; }
.cdk-header-cell { display: table-cell; @extend th; }
.cdk-row { display: table-row; @extend tr; }
.cdk-cell { display: table-cell; @extend td; }
.cdk-table.table-hover .cdk-row:hover { background-color: rgba(0, 0, 0, 0.075); }