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

【问题标题】：Use angular-cdk table with bootstrap 4将 angular-cdk 表与 bootstrap 4 一起使用
【发布时间】：2019-04-17 04:51:58
【问题描述】：

我正在使用 Angular CDK table（没有 Angular Material2）并希望使用 bootstrap table design 对其进行样式设置。

可以将类添加到 CDK 表中，但引导规则直接针对 html 表元素 tr、td、...而 Angular CDK 使用自定义标签 cdk-table、cdk-row、@ 987654327@ ...

作为快速而肮脏的解决方案，我为 cdk 元素编写了自己的规则，其中包含大量来自引导源的复制粘贴。但是，是否有一个很好的、也许更面向未来的解决方案来自动继承 CDK 表的引导规则？

【问题讨论】：

标签： angular sass bootstrap-4 angular-material2 angular-cdk

【解决方案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); }

【讨论】：

【解决方案2】：

我能够毫无问题地获得一个 cdk 表来使用 bootstrap 4。假设您已安装引导程序，只需在 .component.scss 文件中添加：

@import "~/bootstrap/scss/bootstrap"

您也可以将其添加到 styles.scss 文件中以使其成为全局文件。

然后在.component.html中：

<table [datasource]="someDatasource" cdk-table class="table table-bordered">
...
</table>

【讨论】：

我认为这比公认的答案更正确 - cdk-table 应该用作指令而不是元素。它只实现行为，而样式由应用它的元素负责。

【解决方案3】：

我不相信有。 Cdk 表格并不是真正的表格元素。

【讨论】：

我想我建议不要试图让 cdk 表看起来像 bs，而是用 bs 样式编写自己的表组件。 :)

【解决方案4】：

您可以覆盖样式：.cdk-column-...列的名称... { ... }。这是 css 类将最后插入 cdk-header-cell ...

【讨论】：