为何组件的app.scss样式不生效，而styles.scss可正常生效？

Angular默认开启视图封装（View Encapsulation），默认模式是Emulated。这种机制下，Angular会给当前组件的所有DOM元素添加一个专属属性（类似_ngcontent-xxx），同时把组件.scss里的样式编译成带这个属性选择器的规则——只有带该属性的元素才会被匹配，确保样式只作用于当前组件内部。

而你用的Switch组件属于第三方UI组件，它的内部DOM元素是在自身组件的视图封装范围内，不会带上当前组件的专属属性。所以你在app.scss里写的样式规则根本匹配不到这些内部元素，自然没效果。而styles.scss是全局样式文件，Angular不会给它的样式添加视图封装的属性选择器，所以样式能全局生效，包括第三方组件的内部元素。

这里给你三种常用的解决方案：

1. 使用::ng-deep穿透视图封装 #

在组件scss里给目标样式加上::ng-deep前缀，同时配合:host限定作用范围，避免样式全局污染：

// app.scss
:host ::ng-deep .mat-switch-thumb {
  background-color: red;
}

:host表示样式仅作用于当前组件的宿主元素范围内，::ng-deep会让样式穿透到子组件（包括第三方组件）的内部DOM结构，既能修改Switch的样式，又不会影响其他地方的同类型组件。

2. 关闭当前组件的视图封装 #

在组件的装饰器里设置encapsulation: ViewEncapsulation.None，这样组件.scss里的样式会变成全局样式，和styles.scss的效果一致。但要注意，这种方式会让组件内的所有样式全局生效，容易污染其他组件，只建议在必要时使用：

// app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

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

3. 全局样式加组件范围限定 #

如果不想用::ng-deep，可以在styles.scss里给样式加上当前组件的宿主选择器，把样式限定在当前组件内部：

// styles.scss
app-root .mat-switch-thumb {
  background-color: red;
}

这样样式只会作用在app-root组件内的Switch组件，不会影响其他页面的同类型组件。

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