如何将独特的自定义 CSS 添加到 ngx-smart-modals答案

【问题标题】：How to add unique custom CSS to ngx-smart-modals如何将独特的自定义 CSS 添加到 ngx-smart-modals
【发布时间】：2021-03-09 18:19:05
【问题描述】：

我目前正在 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。

例如
* 模态 1 尺寸为 50vw x 50vh
* Modal2 尺寸为 20vw x 40vh * 等等。

【问题讨论】：

标签： html css angular parameters angular6

【解决方案1】：

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

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

最后，您可以使用 my-custom-class 设置此模式且仅此模式的样式。

【讨论】：

【解决方案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;
  }
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：