Как добавить уникальный пользовательский CSS в ngx-smart-modals

Question

Я сейчас создаю приложение на Angular 6.
Я использую ngx-smart-modal для обработки всех моих модалов.
У меня есть 20+ модалов в моем приложении.
Как я могу применить CSS к каждому уникально.

Я попытался использовать параметр [customClass] в их документации, но я относительно новичок в Angular / HTML / CSS / и т. Д., И я не смог заставить его работать.

Я могу изменить размеры моих модальных путей глобально, используя

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

Но не может реплицироваться для отдельных модалов

HTML

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

CSS

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

Я хотел бы иметь каждый модал с уникальным CSS.

Ex.
* Размер Modal1 составляет 50vw x 50vh
* Размер Modal2 составляет 20vw x 40vh * и т. д.

Answer 1

У меня была такая же проблема.

Я решил создать файл ngx-modal.scss и включить его в style.scss после @ import "~ ngx-smart-modal / ngx-smart -modal ";

Мне пришлось добавить ! Важный к нескольким стилям. Не любил это, но это сработало.

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 2

Для использования директивы customClass с квадратными скобками, например [customClass], необходимо передать строку в директиву, например:

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

Наконец, вы можете стилизовать этот и только этот модал с my-custom-class.