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;
}

这将使您的样式渗透到子组件中。但是根据角度小组的说法，此功能即将弃用，建议人们放弃使用它。（个人观点：太多项目依赖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>

然后在您的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样式？

2 个答案: