angular - NgbModal - 自定义类样式

Question

我有一个 Angular 6 应用程序，我试图实现一个从屏幕右侧滑入的模式窗口，如下所示:https://codepen.io/anon/pen/OayRVy

但是，无论我尝试什么，我都无法覆盖模态窗口的定位。我唯一能够改变的是标题/正文的背景颜色之类的东西。

我的模态 HTML:

<ng-template #content let-modal="close">

      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Table of Contents</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dismissModal(modal)"><span aria-hidden="true">&times;</span></button>
      </div>

      <div class="modal-body">
        <p>
          ....
        </p>
      </div>

</ng-template>

组件代码:

  import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

  constructor(private modalService: NgbModal) {}

  public open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'lg'}).result.then((result) => {
      ...
    }, (reason) => {
      ...
    });
  }

如果我检查 HTML 并在 Chrome DevTools 中添加 float: right属性(property)给 .modal-dialog容器，它会做我想做的。但是，添加一个

.modal-dialog {
  float: right;
}

对我的 .scss 文件没有影响。

谁能告诉我如何覆盖默认的 bootstrap 样式，以便我可以强制它出现在屏幕的右侧并占据 100% 的高度？

Answer 1

使用 windowClass来自 NgbModalOptions

    this.modalService.open(
        content, 
        {
            ariaLabelledBy: 'modal-basic-title', 
            size: 'lg', 
            windowClass: 'custom-class'
        }
    )
    .result
    .then((result) => {
        // write your code here
    });

并在 scss 中:

.custom-class {
    float: right;
}