Angular 15 Material禁用表单字段CSS样式修改求助

Angular 15的Material组件全面切换为基于MDC（Material Design Components）的实现，这导致旧的样式选择器和样式控制逻辑不再适用，你遇到的问题主要源于以下两点：

1. 禁用状态的样式不再通过旧的mat-form-field-disabled类直接控制，而是由MDC的内部类和CSS变量管理
2. 视图封装机制阻止了组件内样式覆盖全局的Material默认样式

具体解决方案 #

1. 使用精准的CSS选择器修改样式

禁用字段的透明度通常由opacity属性控制，而非color的alpha通道。你需要针对MDC封装后的内部元素编写选择器，示例如下：

/* 修改禁用输入框的文本颜色与透明度 */
.mat-mdc-form-field.mat-mdc-form-field-disabled .mat-mdc-input-element:disabled {
  color: rgba(0, 0, 0, 1);
  opacity: 1;
}

/* 修改禁用状态下的标签文本样式 */
.mat-mdc-form-field.mat-mdc-form-field-disabled .mat-mdc-form-field-label {
  color: rgba(0, 0, 0, 1);
  opacity: 1;
}

2. 解决样式优先级问题

如果组件内的样式无法生效，可采取以下两种方式：

• 将上述样式放到全局样式文件（如styles.css/styles.scss）中，全局样式不受组件视图封装限制
• 在组件样式中使用::ng-deep提升样式优先级（注意：官方不推荐长期使用，仅作为临时解决方案）：

::ng-deep .mat-mdc-form-field.mat-mdc-form-field-disabled .mat-mdc-input-element:disabled {
  color: rgba(0, 0, 0, 1);
  opacity: 1;
}

3. 通过主题CSS变量修改（推荐）

Angular 15的MDC组件使用CSS变量管理主题样式，你可以在主题文件中直接修改禁用状态的相关变量，这是最符合Material设计规范的方式：

@use '@angular/material' as mat;

// 定义你的主题
$custom-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    ),
  )
);

// 覆盖禁用表单字段的变量
.mat-mdc-form-field-disabled {
  --mdc-text-field-disabled-input-text-color: rgba(0, 0, 0, 1);
  --mdc-text-field-disabled-label-text-color: rgba(0, 0, 0, 1);
  --mdc-text-field-disabled-opacity: 1;
}

关键原因说明 #

Angular 15重构了Material组件的底层实现，原有的非MDC类名（如旧版的mat-form-field-disabled）被MDC的类和变量替代。禁用状态的样式不再直接挂载在mat-mdc-form-field元素上，而是通过内部的mdc-text-field--disabled类和CSS变量控制，这就是你在控制台找不到预期禁用类的核心原因。

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