消除 ng-deep 对组件破坏的影响

Question

我讨厌使用 ng-deep 但没有更好的选择。

我在项目中使用 VMware Clarity https://v1.clarity.design/modals ，在某些情况下，我需要覆盖 modal-body 类。因此，我在我的 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;
}