Angular 如何使用 ng-deep 但仍然只影响一个组件？

Question

在 Angular 应用程序中，使用 Angular 材料作为主题，我正在尝试更新 css ZA2F2ED4F8EBCDC4061D 组件中的组件

这会起作用，但会影响所有组件，失去封装：

::ng-deep .dark-theme { // must have ::ng-deep to see .dark-theme on body
  .action-button:hover {
    color: #ffffff;
  }
}

我怎样才能得到相同的结果，但只针对一个组件？

我已经尝试过这里提到的但似乎对我不起作用：

::ng-deep .dark-theme {
  :host .action-button:hover {
    color: #ffffff;
  }
}
// OR
:host ::ng-deep .dark-theme .action-button:hover {
  color: #ffffff;
}

Answer 1

尝试这个：

当我们将 View Encapsulation(Emulated) 设置为所需的组件时，styles 将仅应用于组件模板中的元素。

@Component({选择器：'app-emulated-encapsulation'，模板：''，styles：''，封装：查看Encapsulation.Emulated，})

使用提供的有限信息来实际测试场景，如果在 @Component 块中设置 Encapsulation 属性可以解决您的问题，您也可以避免使用 ng-deep 和 host。

请参考 - https://angular.io/guide/view-encapsulation了解更多信息。