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

问题描述

我目前正在Angular 6中构建一个应用程序.
我正在使用ngx-smart-modal处理所有模态.
我的应用程序中有20多个模态.
如何将CSS唯一地应用于每个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屋！