Angular中组件的全局scss文件和scss文件之间的区别 [英] Difference between global scss file and scss file for component in Angular

问题描述

在最近的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选择器有什么影响?

解决方案

src/styles.scss

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

example.component.scss

是仅将范围内的CSS应用于该特定组件的CSS.在这里，您将无法对body元素应用样式.

您仍然可以突破范围边界...

在内部使用诸如mat-paginator之类的组件时，例如说example.component.ts，实际上mat-paginator中的CSS在"c13>组件范围之外"，因为mat-paginator有其自己的范围.因此，您可以使用 :: ng-deep 来应用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

In a recent Angular 7 project, I have a component (defined in the file file-list.component.ts) in which there is a mat-paginator (a component from Angular material component library). When I want to change the background color of the mat-paginator, I first tried to put

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

in film-list.component.scss (the stylesheet for associated with this component), the background color of the paginator did not change. When I put this in app.component.scss, it did not work either. But when I put it in the src/styles.css, the background color is correctly changed.

So my questions are:

• What is the difference between src/styles.scss, app.component.scss and film-list.component.scss?
• What is the scope of each of these files?
• What is the influence of body selector used in these stylesheet files?

解决方案

src/styles.scss

Is for global CSS that will be applied across all the application and all the components. Here you can apply styling to body without problem.

example.component.scss

Is the CSS that will be scoped and applied to this specific component only. Here you won't be able to apply styling to body element.

You can still pierce the scoped boundaries...

When using components like mat-paginator inside, let say example.component.ts for example, the CSS from mat-paginator is in fact "outside" the example.component.ts component scope because mat-paginator has its own scope. Therefore you can pierce through the shadow-dom using ::ng-deep to apply CSS.

Working example with the code below: 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;
}

Suggested Documentation

Official Angular documentation about styling: https://angular.io/guide/component-styles

Great blog that explains CSS encapsulation: https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700

这篇关于Angular中组件的全局scss文件和scss文件之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！