Question

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

例如，如果要在border-radius上全局更改<mat-card>，则当前需要向样式中添加important：

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

在我看来，这是由于我们自定义样式之后加载的材质样式引起的。至少根据“传统” CSS标准。因此通常您可以更改加载顺序，最后加载的样式将覆盖之前的样式。

有没有办法做到这一点？还是应该在不添加!important的情况下为这类元素设置样式？

Answer 1

您真的不应该为这些元素“设置样式”，这不是Angular Material的目的。但是可以进行一些自定义-并提供指南：https://v6.material.angular.io/guide/customizing-component-styles。

您特别需要了解样式是如何封装和动态应用的。您可以控制何时以“传统”方式加载全局Angular Material样式表，但由于某些组件样式是动态的，因此您无法控制何时应用所有组件样式。如果希望彻底改变所有样式，则可能应该考虑使用其他库，因为它并不总是只是重新定义类属性。