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;
}