Angular 16+ MDC版本如何修改Material按钮颜色？

迁移到基于MDC的Angular Material组件后，组件内的自定义类会出现无法覆盖Material按钮颜色的问题。本质原因是CSS特异性冲突：

• Material按钮的默认样式选择器包含两个类，特异性为(0,2,0)
• Angular组件内的自定义类会被自动加上内容隔离的属性选择器，最终特异性同样为(0,2,0)
  当特异性相同时，库的样式会因为加载顺序优先级更高，导致自定义样式无法生效。

以下是几种不需要!important、也不用给选择器加标签的解决方案：

• 利用CSS变量（推荐）
  MDC风格的Angular Material组件原生支持通过CSS变量定制样式，直接在自定义类中覆盖对应的变量即可，无需修改特异性：

  .sample-color {
    --mdc-button-container-color: #your-custom-color;
    --mdc-button-label-text-color: #fff;
  }
  

• 组合类选择器提升特异性
  将自定义类与Material按钮的类选择器组合，把特异性提升到(0,3,0)，超过默认样式的(0,2,0)：

  .sample-color.mat-mdc-button {
    background-color: #your-custom-color;
    color: #fff;
  }
  

• 调整样式加载顺序
  在angular.json的styles数组中，将组件的样式文件（或全局自定义样式文件）放在Angular Material样式文件之后加载。这种方式适合全局统一覆盖组件样式的场景，确保自定义样式在库样式之后解析。

内容的提问来源于stack exchange，提问作者Thomas Jahncke