removing effect of ng-deep on component destroy

Question

I hate to use ng-deep but there is no better alternative for this.

I am using VMware Clarity https://v1.clarity.design/modals in my project and for some cases, I need to overwrite modal-body class. So, I am overwriting it using this in my component.scss file:

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

This serves my purpose. But the problem starts for other modals. After opening above modal, if I open any other modal, above styling affects those too. I want above styling only for one modal. So how I can do that.

I was wondering if there is an option to reset above style when the component gets destroyed or What Angular Suggests.

Answer 1

You can just write your selector to be more specific so it targets only the desired modal.

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

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