Angular 16中如何全局配置禁用状态mat-form-field样式

我需要在Angular Material 16的全局配置中修改禁用状态下mat-form-field的文本颜色，要求通过根级配置实现，避免使用即将被废弃的::ng-deep语法。当前我已创建了自定义Material主题与排版，相关代码如下：

@use "@angular/material" as mat;
@use "sass:map";
@import '@angular/material/theming';
@include mat.core();


/* Styles to be applied to Buttons */
$custom-button: mat.define-typography-level(
  $font-family: 'Public Sans, sans-serif',
  $font-size: 16px,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Styles to be applied to input-fields */
$custom-input: mat.define-typography-level(
  $font-family: 'Public Sans, sans-serif',
  $font-size: 14px,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Merge custom configs into existing config */
$custom-typography: map.merge(
    mat.define-typography-config(
        $font-family: 'Public Sans, sans-serif',
        $button: $custom-button
    ),
    (
        'input': $custom-input
    )
);

/* Custom theme colors */
$md-primary: (
    50: #e2e7eb,
    100: #b6c4ce,
    200: #869cae,
    300: #55748d,
    400: #305774,
    500: #0c395c,
    600: #0a3354,
    700: #082c4a,
    800: #062441,
    900: #031730,
    A100: #699fff,
    A200: #367fff,
    A400: #035eff,
    A700: #0054e8,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #ffffff,
        400: #ffffff,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #ffffff,
        A400: #ffffff,
        A700: #ffffff,
    ),
);
$md-accent: (
    50: #f2f8fa,
    100: #d4edf2,
    200: #b6e2eb,
    300: #99d7e3,
    400: #7ccce1,
    500: #1078c0,
    600: #0f6fb9,
    700: #0e66b1,
    800: #0c5da9,
    900: #0a549f,
    A100: #5e9fce,
    A200: #85b8d8,
    A400: #acd2e3,
    A700: #c0dbe7,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #000000,
        400: #000000,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #000000,
        A400: #000000,
        A700: #000000,
    ),
);

$arinspect-app-primary: mat-palette($md-primary);
$arinspect-app-accent: mat-palette($md-accent);
$arinspect-app-warn: mat-palette($mat-red);

$custom-theme: mat.define-dark-theme(
    (
        color: (
            primary: $arinspect-app-primary,
            accent: $arinspect-app-accent,
        ),
        typography: $custom-typography,
    )
);

当前主题和排版已正常生效，但禁用状态的mat-form-field文本使用默认颜色rgba(0,0,0,0.36)，对应DOM中的CSS变量--mdc-filled-text-field-disabled-input-text-color，对比度不足，需要替换为自定义颜色或加深透明度。

解决方案 #

可以通过Angular Material原生主题系统实现全局配置，无需依赖::ng-deep，具体步骤如下：

1. 定义自定义禁用状态颜色：根据你的深色主题需求，设置合适的文本颜色（示例为高对比度的白色半透明）：

$disabled-input-text-color: rgba(255, 255, 255, 0.7);

2. 通过主题混合器覆盖配置：在自定义主题定义完成后，使用mat.form-field-theme混合器传入主题和自定义配置，实现全局覆盖：

// 应用主题到所有组件
@include mat.all-component-themes($custom-theme);

// 覆盖form-field禁用状态的文本颜色
@include mat.form-field-theme($custom-theme, (
  disabled-input-text-color: $disabled-input-text-color,
));

修改后的完整代码 #

@use "@angular/material" as mat;
@use "sass:map";
@import '@angular/material/theming';
@include mat.core();


/* Styles to be applied to Buttons */
$custom-button: mat.define-typography-level(
  $font-family: 'Public Sans, sans-serif',
  $font-size: 16px,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Styles to be applied to input-fields */
$custom-input: mat.define-typography-level(
  $font-family: 'Public Sans, sans-serif',
  $font-size: 14px,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Merge custom configs into existing config */
$custom-typography: map.merge(
    mat.define-typography-config(
        $font-family: 'Public Sans, sans-serif',
        $button: $custom-button
    ),
    (
        'input': $custom-input
    )
);

/* Custom theme colors */
$md-primary: (
    50: #e2e7eb,
    100: #b6c4ce,
    200: #869cae,
    300: #55748d,
    400: #305774,
    500: #0c395c,
    600: #0a3354,
    700: #082c4a,
    800: #062441,
    900: #031730,
    A100: #699fff,
    A200: #367fff,
    A400: #035eff,
    A700: #0054e8,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #ffffff,
        400: #ffffff,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #ffffff,
        A400: #ffffff,
        A700: #ffffff,
    ),
);
$md-accent: (
    50: #f2f8fa,
    100: #d4edf2,
    200: #b6e2eb,
    300: #99d7e3,
    400: #7ccce1,
    500: #1078c0,
    600: #0f6fb9,
    700: #0e66b1,
    800: #0c5da9,
    900: #0a549f,
    A100: #5e9fce,
    A200: #85b8d8,
    A400: #acd2e3,
    A700: #c0dbe7,
    contrast: (
        50: #000000,
        100: #000000,
        200: #000000,
        300: #000000,
        400: #000000,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #000000,
        A400: #000000,
        A700: #000000,
    ),
);

$arinspect-app-primary: mat-palette($md-primary);
$arinspect-app-accent: mat-palette($md-accent);
$arinspect-app-warn: mat-palette($mat-red);

$custom-theme: mat.define-dark-theme(
    (
        color: (
            primary: $arinspect-app-primary,
            accent: $arinspect-app-accent,
        ),
        typography: $custom-typography,
    )
);

// 定义禁用状态输入框文本颜色
$disabled-input-text-color: rgba(255, 255, 255, 0.7);

// 应用主题到所有组件
@include mat.all-component-themes($custom-theme);

// 覆盖form-field的禁用状态文本颜色
@include mat.form-field-theme($custom-theme, (
  disabled-input-text-color: $disabled-input-text-color,
));

这种方式完全遵循Angular Material官方最佳实践，通过原生主题系统实现全局配置，颜色设置会跟随主题统一管理，支持后续主题切换需求。

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