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

这是我的定制

css

，位于

styles.css

的Angular Material的

mat表上

.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>

添加了
：：ng deep
，但没有效果

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

添加了
！重要的到宽度

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

在这里，我还缺少什么来处理
bs4.min.css
和
棱角材质
的垫表

注意：我在我的组件中同时使用
mat表
和
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"
            ],

如果您同时使用引导和材质，您将遇到问题-引导将样式直接添加到HTML元素上，因此它将与使用这些HTML元素的材质组件（即表）发生冲突

基本上，如果您真的需要同时使用这两种方法，您有两种选择：

使用不带HTML
元素的mat表格。您可以阅读更多关于它的内容（请参阅带有display:flex部分的表格-我直接链接到了它，但页面似乎在加载一些数据后“跳转”）
准备您自己的引导包，不包括一些样式表，即
\u tables.scss
文件，这样它就不会覆盖您的样式
Try:host>>>.mat-column-action1{min-width:20px；}@Ramesh我想知道您是如何将所有自定义css文件导入到angular应用程序的，从boottsrap.min.css、style.css、material.css开始，以及它们的顺序和位置import@atul“不走运。”乔尔·约瑟夫，我用
style.css和angular.json
code更新了我的问题。
"styles": [
              "src/styles.css"
            ],