如何修改Angular Material中mat-form-field的Azure/Blue主题颜色？

核心解决方案：精准覆盖MDC类样式 #

Angular Material v15+基于Material Design Components (MDC)重构，原有的mat-form-field层级样式优先级低于MDC原生类，所以直接修改mat-form-field或input标签样式会失效。以下是几种可行的覆盖方式：

方法1：全局样式文件（style.css）直接覆盖 #

全局样式不受组件样式隔离限制，优先级足够覆盖MDC默认样式，添加代码如下：

/* 覆盖非禁用填充输入框的默认背景色 */
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: #你的目标颜色值 !important;
}

/* 可选：覆盖聚焦状态下的背景色 */
.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused {
  background-color: #聚焦时的目标颜色 !important;
}

/* 可选：修改标签颜色 */
.mdc-text-field--filled .mdc-floating-label {
  color: #标签目标颜色;
}

/* 可选：修改输入框文字颜色 */
.mdc-text-field--filled .mdc-text-field__input {
  color: #输入文字目标颜色;
}

注：!important是必要的，MDC默认样式优先级极高，不加会被主题样式覆盖。

方法2：组件内关闭样式隔离（避免全局污染） #

如果不想影响全局样式，可在目标组件中关闭样式隔离，让组件内的样式全局生效：

1. 在组件.ts文件中修改配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭样式隔离
})
export class YourComponentComponent {}

2. 然后在组件css文件中添加方法1的样式代码即可（无需::ng-deep）。

方法3：自定义Angular Material主题（最规范方式） #

通过主题系统修改，能完美兼容Angular Material的主题机制，避免硬写CSS类：
在你的主题文件（如theme.scss）中，针对Azure/Blue主题添加自定义配置：

@use '@angular/material' as mat;

// 定义自定义颜色变量
$custom-filled-bg: #你的目标背景色;
$custom-filled-bg-focused: #聚焦时背景色;
$custom-label-color: #标签颜色;
$custom-input-text-color: #输入文字颜色;

// 生成主题时覆盖组件变量
$azure-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$azure-palette),
      // 其他主题配色配置...
    ),
    components: (
      mat-form-field: (
        filled-input: (
          background-color: $custom-filled-bg,
          background-color-focused: $custom-filled-bg-focused,
          label-color: $custom-label-color,
          input-text-color: $custom-input-text-color
        )
      )
    )
  )
);

确保应用已正确引入该自定义主题。

为什么之前的方法失效？ #

• Angular Material v15+切换到MDC架构后，内部DOM结构使用MDC类，原mat-form-field相关样式优先级低于MDC原生类。
• ::ng-deep已被Angular标记为废弃，且即使使用，也无法突破MDC样式的高优先级限制。

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