устранение влияния ng-deep на уничтожение компонентов

Question

Я ненавижу использовать ng-deep, но лучшей альтернативы для этого нет.

Я использую VMware Clarity https://v1.clarity.design/modals в своем проекте, и в некоторых случаях мне нужно переписать класс модального тела. Итак, я перезаписываю его, используя это в моем файле component.scss:

::ng-deep .modal-body {
  overflow-y: visible;
  overflow-x: visible;
}

Это служит моей цели. Но проблема начинается для других модалов. После открытия выше модального стиля, если я открою любой другой модальный стиль, то вышеупомянутый стиль влияет и на них. Я хочу выше стиль только для одного модального. Так как я могу это сделать.

Мне было интересно, есть ли опция для сброса выше стиля, когда компонент уничтожается или что предлагает Angular.

Answer 1

Вы можете просто написать свой селектор, чтобы быть более конкретным, чтобы он был нацелен только на нужный модал.

<clr-modal class="overflow-modal">...</clr-modal>

::ng-deep .overflow-modal .modal-body {
  overflow-y: visible;
  overflow-x: visible;
}