angular/ngbmodal: backdropClass 不工作

Question

我正在尝试使用 backdropClass 将 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

您需要使用 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 和 class 中，然后将您的 .css 写成

.mycomponent.h1{color:red}

Answer 2

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

不要更改app ViewEncapsulation，尤其是app component...这会给你带来很多问题。

angular/ngbmodal: backdropClass 不工作

angular/ngbmodal: backdropClass doesnt work

bootstrap-ui

angular