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

【问题标题】：How to override CSS styles of component in Angular?如何在 Angular 中覆盖组件的 CSS 样式？
【发布时间】：2019-12-03 04:07:45
【问题描述】：

我有一个自定义组件<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;
    }

它不适合我

【问题讨论】：

我也尝试过使用封装

标签： angular angular7 angular8

【解决方案1】：

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

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

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

目前 IMO 最好的方法是使用全局样式表，例如：

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

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

【讨论】：

在使用::ng-deep 时，我建议将::host 选择器包裹起来以避免意外结果。

【解决方案2】：

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

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

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

然后在你的 AppButtonComponent 中：

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 并删除组件的样式封装。

【讨论】：