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

Question

在最近的Angular 7项目中，我有一个组件（在file-list.component.ts文件中定义），其中包含一个mat-paginator（来自Angular材料组件库的组件）。当我想要改变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”选择器有什么影响？

- Bohao LI

---

组件样式表仅适用于该组件。全局样式表则不是。 - jonrsharpe

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穿过影子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

- j3ff

---

据我所知，::ng-deep正在被弃用（没有明确的替代方案）。 - vicatcu