How to add unique custom CSS to ngx-smart-modals

问题

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.

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.

I can change the sizes of my modals globally using

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

But could not replicate for individual modals

HTML

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

CSS

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

I would like to have each modal with unique CSS.

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

回答1:

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>

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

回答2:

I was having the same issue.

My resolution was making a ngx-modal.scss file and including it in style.scss after @import "~ngx-smart-modal/ngx-smart-modal";

I had to add !important to a few styles. Didnt love that but it worked.

HTML - in component

<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;
  }
}

来源：https://stackoverflow.com/questions/54150480/how-to-add-unique-custom-css-to-ngx-smart-modals