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