如何将独特的自定义 CSS 添加到 ngx-smart-modals [英] How to add unique custom CSS to ngx-smart-modals

问题描述

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

I am currently building an application in Angular 6.
I am using ngx-smart-modal to handle all of my modals.
I have 20+ modals in my application.
How do I apply CSS to each one uniquely.

我尝试在他们的文档中使用 [customClass] 参数，但我对 Angular/HTML/CSS/etc 比较陌生，我无法让它工作.

I have tried using the [customClass] parameter in their documentation, but I am relatively new to Angular/HTML/CSS/etc, and I could not get it working.

我可以使用

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

但无法为单个模态复制

HTML

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

CSS

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

我希望每个模态都有独特的 CSS.

I would like to have each modal with unique CSS.

例如
* Modal1 尺寸为 50vw x 50vh
* Modal2 尺寸为 20vw x 40vh* 等

Ex.
* Modal1 size is 50vw x 50vh
* Modal2 size is 20vw x 40vh * etc.

推荐答案

为了使用带括号的 customClass 指令，如 [customClass]，您必须向指令传递一个字符串，例如:

For using customClass directive with brackets, as [customClass], you must pass a string to the directive, like :

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

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

Finally, you can style this and only this modal with my-custom-class.

这篇关于如何将独特的自定义 CSS 添加到 ngx-smart-modals的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！