css - Angular 应用程序中 (S)CSS 规则的顺序

Question

我目前正在尝试了解有关 Angular 应用程序中 SCSS 编译和包含逻辑的一些细节。如果你看一下给定的 StackBlitz ，您会看到我已经包含了 Angular Material 样式。

@import '~@angular/material/theming';
@include mat-core();
...
@include angular-material-theme($candy-app-theme);

此外，在文件底部，我尝试覆盖“ Material ”按钮的高度。

.mat-raised-button {
  line-height: 50px;
}

但是，这条规则并不适用。或者更准确地说，它被 Angular Material 样式覆盖。 我明白，我可以解决问题并增加选择器的特异性或通过使用 !important，但这不是我想要的。我想了解为什么该规则被覆盖

1. 选择器具有相同的特异性并且
2. 覆盖规则写在 Material 主题的下面

似乎 Angular 重新排列了 SCSS 或以不同的方式包含它们。在最终结果中，覆盖规则在包含 Angular Material 样式之前结束(或者位于完全不同的文件中？)。

Answer 1

Angular 将组件样式的一部分与组件本身捆绑在一起。 Material 成分也是如此。

如果您查看应用程序的 head，您会注意到多个 style 标记。每个都对应一个组件，第一个通常是主题 css。

对于您来说，这意味着您在主题 css 文件中包含的覆盖样式将首先包含在内。然后您的应用程序会导入该按钮以及相应的 css。

CSS 属性具有优先顺序，每个属性的最新值是浏览器实际应用的值。

您有几个选项可以解决这个问题。

!重要

残酷但高效，无论优先级如何都会应用该风格。

.mat-raised-button {
  line-height: 50px !important;
}

更好的选择器

您可以将自己的类添加到按钮，并使用该类来获得更精确的选择器，从而为您提供优先权。

<button class="my-button" md-raised-button>Basic</button>

.my-button.mat-raised-button {
  line-height: 50px;
}

样式封装

通过在组件内移动样式覆盖，Angular 样式封装将启动，并通过添加属性选择器确保您自己的样式获得优先级

/* app.component.css */
.mat-raised-button {
  line-height: 50px;
}