如何在 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，但这在功能上类似于全局样式表，如果您没有正确设置并忘记放置仅在组件加载时加载的全局样式的位置/原因，可能会令人困惑，并导致我的经验中的一些错误。

Answer 2

除了ng-deep之外，正如他们在另一个答案中向您展示的那样：https://stackoverflow.com/a/59145690/12171299

您可以设置一个 @Input((，在其中定义元素的颜色span如下所示：

<app>
<app-button [spanColor]="'red'"></app-button>
</app>

然后在您的应用按钮组件中：

export class AppButtonComponent implements AfterViewInit {
public spanStyle = {};
@Input() public spanColor: string;
public ngAfterViewInit(): void {
if (spanColor) {
this.spanStyle = {
'color': `${spanColor}`
};
}
}
}

最后，在AppButtonComponent html中，你必须做：

<span [ngStyle]="spanStyle"></span>

使用此方法，可以避免使用ng-deep和删除组件的样式封装。