angular/ngbmodal: backdropClass doesnt work

Question

I am trying to change background color of ngbmodal dialog to blue using backdropClass . It doesn't work, why?

my code is:

* component call:

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

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

*html component:

<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 classes:

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

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

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

The image you see appears background in black instead of blue:

Answer 1

Simply add a global style (styles folder) with a background definition of a backdrop. Backdrops of ng-bootstrap modals are injected into body tag.

Don't change app ViewEncapsulation, particularly for app component... It's gonna cause you a lot of problems.

Answer 2

You need use ViewEncapsulation.None(*)

In your component

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

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

See stackblitz

(*)Be carefull, ViewEncapsulation.None, make that all the.css in your component propagate to all the application, so if you has in.css some like

h1{color:red}

All yours h1 in the application becomes color red. To avoid it you can enclose all your component in a div with a class and write your.css like

.mycomponent.h1{color:red}