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

Question

我不喜欢使用ng-deep，但是没有更好的选择。

我在项目中使用VMware Clarity https://v1.clarity.design/modals，在某些情况下，我需要覆盖模式主体类。所以，我在我的component.scss文件中使用它覆盖了它：

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

这符合我的目的。但是问题开始于其他模态。在模式上方打开之后，如果我打开任何其他模式，则上面的样式也会影响那些样式。我只想对一种模式进行样式设置。那么我该怎么做。

我想知道是否有一个选项可以在销毁组件或“什么角度建议”时重置以上样式。

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