Angular 中组件的全局 scss 文件和 scss 文件之间的区别

Question

在最近的 Angular 7 项目中，我有一个组件（在文件 file-list.component.ts 中定义），其中有一个 mat-paginator（来自 Angular material 的组件组件库）。当我想改变mat-paginator的背景颜色时，我首先尝试把

.mat-paginator-container {
  background-color: yellow;
}

在film-list.component.scss（与该组件关联的样式表）中，分页器的背景颜色没有改变。当我把它放在 app.component.scss 中时，它也不起作用。但是当我把它放在 src/styles.css 中时，背景颜色被正确地改变了。

所以我的问题是：

src/styles.scss、app.component.scss和film-list.component.scss有什么区别？
每个文件的范围是什么？
这些样式表文件中使用的 body 选择器有什么影响？

Answer 1

src/styles.scss

用于全局 CSS，它将应用于所有应用程序和所有组件。在这里，您可以毫无问题地将样式应用于 body。

example.component.scss

是 CSS 将限定范围并仅应用于此特定组件。在这里您将无法将样式应用于 body 元素。

您仍然可以突破作用域边界...

当在内部使用 mat-paginator 等组件时，假设 example.component.ts 例如， mat-paginator 中的 CSS 实际上是 "outside" example.component.ts 组件范围，因为 mat-paginator 有自己的范围。因此，您可以使用 ::ng-deep 穿透阴影-dom 以应用 CSS.

使用以下代码的工作示例：https://stackblitz.com/edit/angular-Whosebug-53241725

/* not working because the class is not directly inside this component */
.mat-paginator-container {
  background: yellow;
}

/* working because `ng-deep` pierce through the shadow-dom */
::ng-deep .mat-paginator-container {
  background: red;
}

建议的文档

关于样式的 Angular 官方文档： https://angular.io/guide/component-styles

很棒的博客，解释了 CSS 封装：https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700

Angular 中组件的全局 scss 文件和 scss 文件之间的区别

Difference between global scss file and scss file for component in Angular

stylesheet

angular

angular7