代码之家 › 专栏 › 技术社区 › Bohao LI

全局scss文件和角度中组件的scss文件之间的差异

angular7 stylesheet angular

-1

Bohao LI · 技术社区 · 6 年前

在最近的angular7项目中,我有一个组件(在文件中定义) file-list.component.ts mat-paginator (角度材质组件库中的组件)。当我想改变背景颜色 mat分页器 ,我第一次尝试

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

在里面 film-list.component.scss app.component.scss src/styles.css ,背景色已正确更改。

所以我的问题是:

src/styles.scss , 应用程序组件.scss 和 film-list.component.scss文件 ?
每个文件的作用域是什么?
它的影响是什么 body 在这些样式表文件中使用的选择器?

1 回复 | 直到 6 年前

1

5

j3ff 6 年前

src/styles.scss文件

用于将应用于所有应用程序和所有组件的全局CSS。在这里,您可以将样式应用于 body

示例.component.scss

是仅适用于此特定组件的范围和应用程序的CSS。在这里,您将无法将样式应用于 身体 元素。

你仍然可以穿透范围内的边界。。。

使用以下组件时 mat-paginator 比如说,在里面 example.component.ts 例如,来自 mat分页器 示例.component.ts 组件范围,因为有自己的范围。因此,可以使用应用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;
}

建议的文件

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

https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700