在自己的样式之前加载 Angular Material答案

【问题标题】：Load Angular Material before own styles在自己的样式之前加载 Angular Material
【发布时间】：2019-05-31 21:34:13
【问题描述】：

我们有一个使用 Material 的 Angular 项目，但我们在覆盖样式方面遇到了一些问题。

例如，如果我们想在<mat-card>上全局更改border-radius，我们目前需要在样式中添加important：

.mat-card { border-radius: $some-var !important; }

在我看来，这似乎是由我们自己的自定义样式之后加载的材质样式引起的。至少根据“传统”CSS 标准。所以通常你可以改变加载顺序，最后加载的样式会覆盖之前的。

有没有办法做到这一点？或者我们应该如何设置这些元素的样式，而不是全部添加!important？

【问题讨论】：

【解决方案1】：

你真的不应该“为这些元素设置样式”——这不是 Angular Material 的意义所在。但是可以进行一些自定义 - 并且可以使用指南：https://v6.material.angular.io/guide/customizing-component-styles。

您尤其需要了解样式是如何封装和动态应用的。您可以控制何时以“传统”方式加载全局 Angular Material 样式表，但您无法控制何时应用所有组件样式，因为其中一些是动态的。如果您希望完全重新设计所有内容 - 您可能应该考虑使用不同的库，因为它并不总是仅仅只是重新定义类属性的问题。

【讨论】：