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

Question

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

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

removing effect of ng-deep on component destroy