如何让Angular组件样式表对子组件生效？

这确实是Angular的有意设计——核心在于组件样式封装（View Encapsulation），目的是避免不同组件之间的样式冲突，让每个组件的样式只“专属”于自己的模板内容。

为什么你的样式不生效？ #

Angular默认使用ViewEncapsulation.Emulated模式，它会给当前组件模板里的所有元素自动添加一个类似_ngcontent-xxx的专属属性，同时把你的.some-other-angular-component-inner-class这类样式选择器，偷偷转换成.some-other-angular-component-inner-class[_ngcontent-xxx]。而子组件（不管是自定义还是第三方库的）内部的元素，属于子组件的封装域，不会带有这个_ngcontent-xxx属性，所以你的样式规则自然匹配不到它们。

给你几个可行的解决方案： #

1. 使用:host ::ng-deep样式穿透（最推荐）

这是Angular官方提供的、专门用来处理“需要在父组件样式表中影响子组件内部元素”的方案，而且可以精准限定作用范围：

:host ::ng-deep .some-other-angular-component-inner-class {
  background-color: red;
}

• :host：确保样式只作用于当前my-component的宿主元素范围内，不会污染全局或者其他组件里的同名子组件。
• ::ng-deep：穿透子组件的样式封装，让规则能匹配到子组件内部的元素。

2. 关闭当前组件的样式封装（谨慎使用）

如果你不想用样式穿透，可以把my-component的样式封装模式改成ViewEncapsulation.None，但这样组件里的所有样式都会变成全局样式，必须加前缀避免冲突：
首先在组件类里修改配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyComponent { }

然后给你的样式加上组件选择器前缀：

app-my-component .some-other-angular-component-inner-class {
  background-color: red;
}

这种方式虽然有效，但容易引发全局样式冲突，只建议在特殊场景下使用。

3. 通过组件输入属性传递样式（自定义子组件专属）

如果some-other-angular-component是你自己开发的组件，更优雅的方式是用Angular的组件通信机制来传递样式：

• 在子组件中定义一个输入属性：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'some-other-angular-component',
  templateUrl: './some-other-angular-component.html'
})
export class SomeOtherAngularComponent {
  @Input() customInnerClass = '';
}

• 在子组件模板中绑定这个类：

<div [class]="customInnerClass">...</div> <!-- 这里是子组件内部需要加样式的元素 -->

• 最后在my-component的模板中传递类名：

<some-other-angular-component [customInnerClass]="'some-other-angular-component-inner-class'"></some-other-angular-component>

这种方式完全符合Angular的组件设计理念，没有样式穿透的副作用，是自定义组件之间样式传递的最佳实践。

内容的提问来源于stack exchange，提问作者Master_T