css - 如何在不全局应用样式的情况下将样式从 Angular-Cli 中的组件 A 样式表应用到组件 B？

Question

我有两个 Angular 组件:

@Component({
    selector: ‘component-a’,
    templateUrl: './component-a.html',
    styleUrls: [ ‘./component-a.scss' ],
})

@Component({
    selector: ‘component-b’,
    templateUrl: './component-b.html',
    styleUrls: [ ‘./component-b.scss' ],
})

在 component-a HTML 中:

<div class=“cmp-a-container”>
    component A
    <component-b></component-b>
</div>

在 component-b HTML 中:

<div class=“cmp-b-container”>
    component B
</div>

component-b 在其他组件中被重用。但是当在 component-a 中使用 component-b 时，我希望它在 .cmp-b-container 上应用一组特定样式> 类。

如果我在component-a.scss中添加如下代码，

.cmp-a-container {
  .cmp-b-container { /* Styles here */ }
}

样式将不适用。我相信这就是 Angular 的工作方式。

所以我的解决方案是，在 styles.scss(全局 sass 文件)上添加样式。

这是执行此操作的正确方法还是有一种方法可以将 component-a 的样式表中指定的样式应用于 component-b 的内部 html它由 component-a? 包装。为什么 Angular 没有让这成为可能？

我正在使用 Angular-Cli 和 Sass。

Answer 1

您应该使用::ng-deep 以便您的样式传播到子组件，参见 https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

它应该是这样的:

.cmp-a-container ::ng-deep{
  .cmp-b-container { /* Styles here */ }
}