Question

我在style.css中有一个CSS类，该类应适用于我的应用程序中的任何组件。我有一个需要此类正常工作的组件A。而且此组件内部还有另一个组件B，它也需要此类。但是此类无法在内部组件B中使用。有什么想法吗？

style.css：

.my-hover:hover {...}

组件A：

....
<div class="my-hover"></div>
<app-component-b *ngIf="aCondition"></app-component-b>

组件B：

<div class="my-hover"></div>

如果我在CSS类的前面加上::ng-deep，则该类将不能在A或B中使用。

Answer 1

这应该可以正常工作，例如本示例：https://stackblitz.com/edit/angular-ewfqqw。

您应该检查 angular.json ，您已导入

 "styles": [
     "src/styles.css"
 ],

Answer 2

您可以使用以下技术从Host向子组件注入样式：

:host >>> app-component-b div.my-hover{ /* your style here */ display: flex; }