为什么 Bootstrap css 与 angular material custom css 重叠答案

【问题标题】：Why Bootstrap css overlaps angular material custom css为什么 Bootstrap css 与 angular material custom css 重叠
【发布时间】：2020-06-24 04:04:12
【问题描述】：

这是我在 Angular Material 的 mat-table 上的自定义 css，位于 styles.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";。此后自定义css 的.mat-column-action1 无法正常工作。

我尝试了什么？

在styles.css 的最后一行移动了@import 语句，如下所示。但整个 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 时，我还缺少什么。

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

【问题讨论】：

试试 :host >>> .mat-column-action1 { min-width: 20px; }
@Ramesh 我现在想知道您如何从 boottsrap.min.css、style.css、materia.css 及其顺序和位置开始将所有自定义 css 文件导入到 Angular 应用程序中进口
@atul，没有运气。
@JoelJoseph，我用styles.css and angular.json 代码更新了我的问题。

标签： css angular bootstrap-4 angular-material

【解决方案1】：

如果您同时使用 Bootstrap 和 Material，您将会遇到问题 - Bootstrap 直接将样式添加到 HTML 元素中，因此它会与使用这些 HTML 元素（即 table）的 Material 组件混淆。

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

使用不带 HTML <table> 元素的 mat-table。您可以阅读更多关于它的信息here（请参阅带显示的表格：flex 部分 - 我直接链接到它，但加载一些数据后页面似乎“跳转”）。
准备您自己的 Bootstrap 包，不包括一些样式表，即_tables.scss 文件，这样它就不会覆盖您的样式。

【讨论】：