如何修改Angular Material禁用状态下的按钮颜色？

方法一：直接通过CSS类定位覆盖 #

利用按钮上自带的mat-button-disabled类，结合你的自定义类.setting_button，通过提高样式优先级来覆盖默认禁用样式：

.setting_button.mat-button-disabled {
  /* 修改按钮图标/文字颜色 */
  color: #999;
  /* 若需要修改背景色（针对带背景的按钮） */
  background-color: #eee;
}

方法二：通过Angular Material主题变量统一配置（推荐） #

如果项目使用了Material主题系统，可在全局样式文件（如styles.scss）中修改主题变量，实现全局统一的禁用按钮样式：

@import '@angular/material/theming';

// 假设你已定义了项目的主题调色板
$custom-primary: mat-palette($mat-blue);
$custom-accent: mat-palette($mat-pink);
$custom-warn: mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

// 覆盖禁用按钮的样式配置
$button-theme: mat-button-theme($custom-theme);
$button-theme: mat-button-theme-config($button-theme, (
  disabled: (
    color: rgba(0, 0, 0, 0.38), // 自定义禁用状态的文字/图标颜色
    background-color: rgba(0, 0, 0, 0.12) // 自定义禁用状态的背景色
  )
));

@include mat-button-theme($button-theme);

样式不生效的排查方案 #

如果上述样式没起作用，可能是Angular视图封装导致样式无法穿透，可尝试：

1. 在组件的@Component装饰器中关闭视图封装：

@Component({
  // ...其他配置
  encapsulation: ViewEncapsulation.None
})

2. 临时使用::ng-deep穿透（注：该语法已标记为废弃，仅作为临时方案）：

::ng-deep .setting_button.mat-button-disabled {
  color: #999;
}

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