角度应用程序中CSS规则的顺序

我目前正试图了解Angular应用程序中SCSS编译和包含逻辑的一些细节。如果你看一下给定的，你会发现我已经包括了角材质样式

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

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

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

但是，此规则不适用。或者更准确地说，它被角度材质样式覆盖我明白，我可以解决这个问题并提高选择器的特异性，或者使用！重要，但这不是我想要的。我想了解，既然如此，为什么规则会被推翻

选择器具有相同的特异性和

覆盖规则写在材料主题的包含下方

---

似乎angular会重新排列SCS或以不同的方式包含它们。在最终结果中，替代规则在包含角度材质样式之前结束（或者在完全不同的文件中？）。

角度将组件样式的一部分绑定到组件本身。材料组件也是如此

如果查看应用程序的

标题

，您会注意到多个

样式

标记。每个组件对应一个组件，以及第一个组件，通常是主题css

对于您来说，这意味着您在主题化css文件中包含的覆盖样式将首先包含。然后按钮被你的应用程序导入，并随之导入相应的css

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

你有几个选择来解决这个问题

！重要信息

野蛮但高效，无论优先次序如何，都会采用这种风格

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

更好的选择器

您可以将自己的类添加到按钮中，并使用所述类来拥有更精确的选择器，从而为您提供优先级

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

样式封装

通过在组件内部移动样式替代，角度样式封装将生效，并通过添加属性选择器确保您自己的样式获得优先权

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

---

Angular是将组件样式的一部分绑定到组件本身。材料组件也是如此

如果查看应用程序的

标题

，您会注意到多个

样式

标记。每个组件对应一个组件，以及第一个组件，通常是主题css

对于您来说，这意味着您在主题化css文件中包含的覆盖样式将首先包含。然后按钮被你的应用程序导入，并随之导入相应的css

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

你有几个选择来解决这个问题

！重要信息

野蛮但高效，无论优先次序如何，都会采用这种风格

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

更好的选择器

您可以将自己的类添加到按钮中，并使用所述类来拥有更精确的选择器，从而为您提供优先级

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

样式封装

通过在组件内部移动样式替代，角度样式封装将生效，并通过添加属性选择器确保您自己的样式获得优先权

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

将css放在app.component中。（s）css不是真正的解决方案。如果您的app.component包含路由器，并且按钮位于其他组件中，则您的样式仍然被覆盖。我不认为有一个优雅的解决方案，否则你的css名称空间，比如body.my-style{material override}将css放入app.component。（s）css不是一个真正的解决方案。如果您的app.component包含路由器，并且按钮位于其他组件中，则您的样式仍然被覆盖。我不确定是否有一个优雅的解决方案，否则将命名您的css，如body.my-style{material override}