如何在 Angular 应用程序中更改 Bootstrap 生成的 CSS？答案

【问题标题】：How can I change CSS generated by Bootstrap in an Angular app?如何在 Angular 应用程序中更改 Bootstrap 生成的 CSS？
【发布时间】：2022-01-22 21:59:33
【问题描述】：

我是 Angular 和 Bootstrap 的新手

其实我的浏览器里有这个：

Browser Code through inspect

这在我的代码中

<ng-template #newSlaVmData let-modal>
          <div class="modal-header modal-slaVMData">
            <h4 class="modal-title" id="modal-basic-title">
              Add
            </h4>
            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
              <span aria-hidden="true">
                ×
              </span>
            </button>
          </div>

如您所见，部分代码是由 Bootstrap 生成的。

我想知道如何更改“modal-dialog”（浏览器代码）的 CSS？

我尝试了不同的方法，比如在我的 SCSS 文件中添加这个类，但没有奏效。

我使用这些依赖项：

"@ng-bootstrap/ng-bootstrap": "^9.1.3"
"bootstrap": "^4.6.0",

【问题讨论】：

标签： javascript css angular typescript bootstrap-4

【解决方案1】：

您应该使用::ng-deep 伪类来禁用视图封装。将此添加到您的 .scss 文件中：

::ng-deep .modal-dialog {
  margin-top: 100px;
  width: 500px;
}

【讨论】：

【解决方案2】：

你可以在类之后添加样式

<div class="modal-dialog" style="color:white"></div>

这将覆盖引导类。

【讨论】：

这确实覆盖了引导样式，但是，使用内联样式很糟糕，您最终会在整个模板 html 中都有样式

【解决方案3】：

您可以简单地覆盖引导程序使用的类，如下所示：

.modal-dialog {
  background-color: black;
}

在引导 css 之后加载 css 文件很重要

【讨论】：