如何覆盖 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 的最佳方法是使用全局样式 sheet，例如：

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

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

Answer 2

除了他们在另一个答案中向您展示的 ng-deep 之外：

您可以设置一个 @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 和删除组件的样式封装。

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

How to override CSS styles of component in Angular?

angular

angular7

angular8