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选择器有什么影响？

Answer 1

src / styles.scss

适用于将在所有应用程序和所有组件中应用的全局CSS。在这里，您可以毫无问题地将样式应用于class ProductService{ @Autowired JmsTemplate jmsTemplate; @Value("${queue.name}") private String queue; public void send(Item i){ jmsTemplate.convertAndSend(queue,i) } }。

example.component.scss

是仅适用于此特定组件的CSS。在这里，您将无法对body元素应用样式。

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

在内部使用诸如body之类的组件时，例如假设mat-paginator，则example.component.ts中的CSS实际上在mat-paginator组件范围的“外部”，因为{{1 }}有其自己的范围。因此，您可以使用 :: ng-deep 来应用CSS。

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

example.component.ts

建议的文档

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

说明CSS封装的优秀博客：https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700

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

1 个答案: