如何解决mat-flat-button激活后蓝色背景样式丢失问题

问题相关代码 #

<div class="button-row">
    <button mat-flat-button matStepperNext (click)="validate17()" [disabled]="!uploadedSuccessfully">Validate</button>
</div>

现象说明 #

• 初始禁用状态样式正常
  
• 绑定的uploadedSuccessfully变量变为true后，按钮切为激活状态，蓝色背景丢失，预期激活样式如下：
  

解决方法 #

按优先级依次尝试以下方案：

• 显式指定按钮主题色（90%以上场景可解决）
  Angular Material 按钮组件需要通过color属性绑定主题调色板，未指定时在部分版本、全局样式干扰场景下会丢失默认背景，直接给按钮添加color="primary"属性即可，组件会自动适配激活、禁用、hover等全状态样式：

  <div class="button-row">
      <button 
          mat-flat-button 
          color="primary"
          matStepperNext 
          (click)="validate17()" 
          [disabled]="!uploadedSuccessfully"
      >
          Validate
      </button>
  </div>
  

• 检查Material主题是否正确加载
  如果加完color属性仍无样式，先确认项目已正确引入Angular Material主题：

  • 用预构建主题的场景，在全局样式文件（通常是src/styles.scss或src/styles.css）中添加导入：

    @import '@angular/material/prebuilt-themes/indigo-pink.css';
    

  • 用自定义主题的场景，确认主题配置中已引入按钮组件的主题混入：

    @use '@angular/material' as mat;
    // 省略自定义调色板、主题定义逻辑
    @include mat.button-theme($your-custom-theme); // 不可遗漏这行
    

• 排查全局样式覆盖问题
  若主题配置正常，检查项目全局样式中是否存在对button标签的强制样式覆盖，例如button { background: transparent !important; }这类规则会重置Material按钮的默认背景。
  若必须保留全局按钮规则，可单独给当前按钮加样式修正：

  .button-row .mat-flat-button.mat-primary {
      background-color: #1976d2; // 替换为你需要的蓝色色值
  }
  .button-row .mat-flat-button.mat-primary:hover:not([disabled]) {
      background-color: #1565c0;
  }
  .button-row .mat-flat-button.mat-primary[disabled] {
      background-color: rgba(0, 0, 0, 0.12);
  }
  

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