为什么Bootstrap css与角度材质自定义css重叠

Question

这是我在位于styles.css的Angular Material的mat-table上的自定义css。

.mat-column-action1 {
min-width: 20px;
}

我的col定义看起来像

<ng-container matColumnDef="action1">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let e; let i = index;">
<span *ngIf="i == mouseOverIndex" (click)="edit(e.id)"><i class="fas fa-pen"></i></span>
</td>
</ng-container>

这是意料之中的事。现在，我在styles.css的第一行添加了@import "../lib/bs4.min.css";。从那时起，.mat-column-action1的自定义css无法正常工作。

我试了什么？

将@import语句移动到styles.css的最后一行，如下所示。但整个bs4.css风格都不起作用。

.mat-column-action1 {
min-width: 20px;
}
@import "../lib/bs4.min.css";

添加了::ng-deep，但没有效果。

::ng-deep .mat-column-action1 {
min-width: 20px;
}

将!important;添加到宽度中

.mat-column-action1 {
min-width: 20px !important;
}

在使用bs4.min.css和Angular Material的垫子表时，我还缺少什么呢。

注意：我在组件中同时使用mat-table和bs4表。

@Joel 的更新

在styles.css中

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "../lib/bs4.min.css";
@import "../lib/mdb.min.css";
table {
width: 100%;
}
.mat-header-cell {
font-size: 14px;
}
.mat-column-action1 {
min-width: 20px;
}

在angular.json中

"styles": [
"src/styles.css"
],

Answer 1

如果你同时使用Bootstrap和Material，你会遇到问题-Bootstrap将样式直接添加到HTML元素上，因此它会干扰使用这些HTML元素的Material组件，即表。

基本上，如果你真的需要同时使用，你有两个选项：

1. 使用不带HTML<table>元素的垫子表。您可以在这里阅读更多关于它的信息(请参阅Tables with display：flex部分-我直接链接到它，但在加载一些数据后，页面似乎会"跳转"(
2. 准备你自己的引导包，不包括一些样式表，即_tables.scss文件，这样它就不会覆盖你的样式