angular - 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 是事实上，在 example.component.ts 组件作用域“外部”，因为 mat-paginator 有自己的作用域。因此，您可以使用::ng-deep穿透shadow-dom来应用CSS。

使用以下代码的工作示例:https://stackblitz.com/edit/angular-stackoverflow-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