Angular13升级至15后，Material排版配置$input移除替代方案问询

问题背景 #

从Angular 13升级到Angular 15后，构建时提示$input在自定义排版配置中不再被支持。原有Angular 13的排版声明如下：

$custom-typography: mat-typography-config(
    $font-family: 'Open Sans, sans serif',
    $input:         mat-typography-level(14px, 1.25, 400),
);

当前需实现以下需求：

• 创建自定义主题
• 为按钮等官方支持的组件设置自定义排版
• 为所有输入字段应用自定义排版

目前公司调色板和按钮的自定义设置已生效，但输入字段的自定义排版未起作用。

当前主题文件代码 #

@use '@angular/material' as mat;
@use "./company-palette" as ew;
@use "sass:map";

@include mat.core();

// 按钮自定义排版
$custom-button: mat.define-typography-level(
    $font-family: 'Open Sans, sans serif',
    $font-weight: 500,
    $font-size: 1rem,
    $line-height: 1,
    $letter-spacing: 'normal'
);

// 输入框自定义排版
$custom-input: mat.define-typography-level(
    $font-family: 'Open Sans, sans serif',
    $font-weight: 400,
    $font-size: 12px,
    $line-height: 1,
    $letter-spacing: 'normal'
);

// 合并排版配置
$ew-typography-config: map.merge(
        mat.define-typography-config(
            $font-family: 'Open Sans, sans serif',
            $button: $custom-button
        ),
        (
            'input': $custom-input
        )
);

// 应用组件排版
@include mat.all-component-typographies($ew-typography-config);

// 输入框排版Mixin
@mixin typography($theme) {
    $custom-typography-config: mat.get-typography-config($theme);

    .mat-mdc-form-field {
        @include mat.typography-level($custom-typography-config, 'input')
    }
}

// 定义主题调色板
$app-primary: mat.define-palette(ew.$company-default-light-primary);
$app-accent: mat.define-palette(ew.$company-default-light-accent);
$app-success: mat.define-palette(mat.$green-palette);
$app-warn: mat.define-palette(mat.$red-palette);
$app-disabled: mat.define-palette(mat.$grey-palette);

// 定义主题
$app-theme: mat.define-light-theme((
    color: (
        primary: $app-primary,
        accent: $app-accent,
        success: $app-success,
        warn: $app-warn,
        disabled: $app-disabled
    ),
    typography: $ew-typography-config,
    density: 0,
));

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

解决方案 #

问题根源是Angular Material 15迁移到MDC组件库后，输入框的DOM结构、类名及排版层级绑定逻辑发生了变化，原有的input层级不再自动关联输入组件，需手动调整样式目标和优先级。

修改步骤 #

1. 优化排版Mixin的样式选择器
   原有的.mat-mdc-form-field选择器不够精准，需直接指向输入框的文本元素.mat-mdc-input-element，并手动提取自定义排版属性应用。

2. 确保Mixin被正确调用
   在主题文件末尾添加Mixin调用，让样式生效。

修改后的完整主题文件 #

@use '@angular/material' as mat;
@use "./company-palette" as ew;
@use "sass:map";

@include mat.core();

// 按钮自定义排版
$custom-button: mat.define-typography-level(
    $font-family: 'Open Sans, sans serif',
    $font-weight: 500,
    $font-size: 1rem,
    $line-height: 1,
    $letter-spacing: 'normal'
);

// 输入框自定义排版
$custom-input: mat.define-typography-level(
    $font-family: 'Open Sans, sans serif',
    $font-weight: 400,
    $font-size: 12px,
    $line-height: 1,
    $letter-spacing: 'normal'
);

// 合并排版配置
$ew-typography-config: map.merge(
        mat.define-typography-config(
            $font-family: 'Open Sans, sans serif',
            $button: $custom-button
        ),
        (
            'input': $custom-input
        )
);

// 应用组件排版
@include mat.all-component-typographies($ew-typography-config);

// 输入框排版Mixin
@mixin typography($theme) {
    $custom-typography-config: mat.get-typography-config($theme);
    $input-level: map.get($custom-typography-config, 'input');

    // 直接针对输入框文本元素应用样式
    .mat-mdc-form-field {
        .mat-mdc-input-element {
            font-family: map.get($input-level, 'font-family');
            font-weight: map.get($input-level, 'font-weight');
            font-size: map.get($input-level, 'font-size');
            line-height: map.get($input-level, 'line-height');
            letter-spacing: map.get($input-level, 'letter-spacing');
        }

        // 可选：调整浮动标签样式（若需要统一风格）
        .mat-mdc-floating-label {
            font-family: map.get($input-level, 'font-family');
            font-size: map.get($input-level, 'font-size');
        }
    }
}

// 定义主题调色板
$app-primary: mat.define-palette(ew.$company-default-light-primary);
$app-accent: mat.define-palette(ew.$company-default-light-accent);
$app-success: mat.define-palette(mat.$green-palette);
$app-warn: mat.define-palette(mat.$red-palette);
$app-disabled: mat.define-palette(mat.$grey-palette);

// 定义主题
$app-theme: mat.define-light-theme((
    color: (
        primary: $app-primary,
        accent: $app-accent,
        success: $app-success,
        warn: $app-warn,
        disabled: $app-disabled
    ),
    typography: $ew-typography-config,
    density: 0,
));

// 应用所有组件主题
@include mat.all-component-themes($app-theme);
// 应用输入框自定义排版
@include typography($app-theme);

说明 #

• Angular Material 15的MDC组件重构后，取消了原有的input排版层级自动绑定，需手动定位到具体DOM元素设置样式。
• 使用map.get直接提取自定义排版的属性值，确保样式精准覆盖默认样式。
• 若需要调整输入框的其他元素（如提示文本、错误信息），可在Mixin中添加对应选择器和样式规则。

内容的提问来源于stack exchange，提问作者Bill S.