如何在 Angular 中覆盖组件的 CSS 样式？

Question

我有一个自定义组件<app-button><span></span></app-button>。

它具有 CSS 样式，例如：

span:hover {
   color: red;
}

当我在另一个组件中使用此组件并尝试在父组件中应用 CSS 样式时，它没有效果：

<app>
<app-button></app-button>
</app>

app我尝试过的内部组件：

  app-button span:hover {
       color: green;
    }

它对我不起作用

Answer 1

你可以使用ng-deep选择器：

::ng-deep app-button span:hover {
   color: green;
}

这将使您的样式渗透到子组件。但是根据 angular 团队的说法，这个功能很快就会被弃用，建议人们放弃它。（个人意见：太多项目依赖 ng-deep 以至于他们很快就会弃用它）

目前 IMO 最好的方法是使用具有以下内容的全局样式表：

app app-button span:hover {
   color: green;
}

您也可以在父组件上将视图封装设置为 none，但这在功能上类似于全局样式表，如果您没有正确设置并且忘记在哪里/为什么放置仅在加载时加载的全局样式，则可能会造成混淆一个组件加载，并导致我的经验中的一些错误。