angular - 角度/ngbmodal：背景类不起作用

Question

我正在尝试使用将 ngbmodal 对话框的背景颜色更改为蓝色蓝色。它不起作用，为什么？

我的代码是：

* 组件调用：

let options: NgbModalOptions = {
        size: 'sm',
        backdrop:'static',
        backdropClass: "light-blue-backdrop"
      };

      var res = this.modalService.open(content, options);

*html 组件：

<ng-template #content let-modal>
<div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>

* CSS类：

.dark-modal .modal-content {
    background-color: red;
    color: white;
  }

.dark-modal .close {
    color: white;
}

.light-blue-backdrop {
    background-color: blue !important;
}

您看到的图像背景显示为黑色而不是蓝色：

Answer 1

只需添加具有背景定义的全局样式（样式文件夹）。ng-bootstrap 模态的背景被注入到 body 标签中。

不要更改应用程序的 ViewEncapsulation，特别是对于应用程序组件......它会给你带来很多问题。

Answer 2

您需要使用 ViewEncapsulation.None(*)

在您的组件中

import { Component,ViewEncapsulation  } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None, //<--this line
  ...
})

见stackblitz

(*)小心，ViewEncapsulation.None，让组件中的所有 .css 传播到所有应用程序，所以如果你在 .css 中有一些类似

h1{color:red}

您在应用程序中的所有 h1 都变为红色。为避免这种情况，您可以将所有组件包含在一个带有类的 div 中，并编写 .css 之类的

.mycomponent.h1{color:red}