使用 Angular 较新的 MDC (16+)，如何更改按钮的颜色？

Question

当迁移到基于 MDC 的 Angular 材质组件时，Angular 组件中的类不再能够覆盖材质按钮的颜色。

这是该问题的工作示例：https://stackblitz.com/edit/c4vkb1?file=src%2Fexample%2Fbutton-example.html

这是因为材质按钮的 Specificity 为 (0,2,0)（两个类），与角度组件中的类相同（.sample-color [_ngcontent-ng-c1823106284]）

虽然我知道解决方法（例如向我的 CSS 选择器添加标签），但我希望那里有选项。理想情况下，我希望具有相同特异性的角度组件类比依赖库中的其他 CSS 选择器具有更高的优先级。 （仅供参考，我不想使用！重要）

Answer 1

在较新的角度材料版本中，他们正在研究设计令牌。您可以使用组件提供的令牌比以前更多地配置组件。在你的例子中而不是设置

color: white;

可以设置

--mdc-text-button-label-text-color: white;

组件会以正确的方式处理它。

---

另一个解决方案是借助相对较新的 api“css @layers”来标记所有库样式。

 import '@angular/material/....theme.css' layer(library);

这样，库中的所有样式都会像它们的选择器比应用程序选择器弱一样工作，因为没有图层的样式被视为更强的样式