Question

我目前正在Angular 6中构建应用程序。
我正在使用ngx-smart-modal处理所有模态。
我的应用程序中有20多个模态。
如何将CSS唯一地应用于每个。

我曾尝试在他们的文档中使用[customClass]参数，但是我对Angular / HTML / CSS / etc还是比较陌生，我无法使其正常工作。

我可以使用

全局更改模态的大小

/deep/ .nsm-dialog{ -insert style- }

但无法复制单个模态

HTML

<ngx-smart-modal #Create identifier="Create" customClass="'modal'">

CSS

.nsm-dialog.modal {
  width: 50vw;
  height: 50vh;
}

我希望每个模式都有唯一的CSS。

例如。
* Modal1大小为50vw x 50vh
* Modal2大小为20vw x 40vh *等。

Answer 1

要将带括号的customClass指令与[customClass]一起使用，必须将字符串传递给指令，例如：

<ngx-smart-modal [customClass]="'my-custom-class'"></ngx-smart-modal>

最后，您可以使用my-custom-class对此样式进行样式设置，并且只能对此样式进行样式设置。

Answer 2

我遇到了同样的问题。

我的解决方案是制作一个 ngx-modal.scss 文件，并在 @import“〜ngx-smart-modal / ngx之后，将其包含在 style.scss 中-smart-modal”；

我必须在一些样式中添加！important 。没有爱，但它的工作。

HTML-组件中

<ngx-smart-modal #modalName 
  identifier="modalName"
  [customClass]="'confirmation-modal'">
</ngx-smart-modal>

scss-ngx-modal.scss

.confirmation-modal {
  background-color: black !important;
  border: 1px solid grey;

  .modal-body {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-top: 1px solid transparent;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    top: 60px;
    position: relative;
  }
}

Answer 3

对于上述示例的正常方式将起作用，但如果您以动态方式创建模态，则应该这样做

const optionModel: INgxSmartModalOptions = {
  closable: true,
  escapable: false,
  dismissable: false,
  customClass: "signSowClass" };
 let modal;
  modal = this.ngxSmartModalService.create('signSow', SignSowComponent, optionModel).open()

您可以通过上面提到的选项传递自定义类

如何将唯一的自定义CSS添加到ngx-smart-modals

3 个答案: