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

Posted 2023-03-06

【中文标题】消除 ng-deep 对组件破坏的影响

【英文标题】：removing effect of ng-deep on component destroy

【发布时间】：2019-09-05 11:28:54

【问题描述】：

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

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

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

这符合我的目的。但问题开始于其他模式。打开以上模态后，如果我打开任何其他模态，上述样式也会影响这些。我只想为一种模式设置上述样式。那么我该怎么做呢。

我想知道当组件被破坏或 Angular 建议时是否有重置上述样式的选项。

【问题讨论】：

有什么方法可以清楚地访问您需要更改的 VMware 模式？如果没有，请在所有模式中添加 customClass，然后使用 CSS 的 :not 选择器

添加自定义类不起作用。我正在使用模态组件

@vmware-clarity 团队有什么建议吗？

【参考方案1】：

您可以将选择器编写得更具体，使其仅针对所需的模式。

<clr-modal class="overflow-modal">...</clr-modal>

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