Angular如何使用ng深度但仍然只影响一个组件

Question

在Angular应用程序中，使用Angular Material作为主题，当主题变为深色时，我试图更新组件中的css类。

这是可行的，但它会影响所有组件，失去封装：

::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

试试这个：

当我们将视图封装(仿真(设置为所需组件时，样式将仅应用于组件模板中的元素。

@组件({选择器："应用程序模拟封装"，模板："，样式："，encapsulation:视图封装。仿真，})

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

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