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