Angular Material 19 form-field-overrides混入样式不生效求助

针对你遇到的form-field-overrides混入无效但button-overrides正常的问题，可以从以下几个方面排查解决：

1. 确保样式文件层级和主题初始化顺序正确 #

Angular Material的组件覆盖混入需要在全局样式文件（如styles.scss）中使用，且必须在主题初始化之后调用。如果放在组件局部样式中，或者在主题初始化之前调用，都会导致样式无法生效。

正确的全局样式结构示例：

@use "@angular/material" as mat;

// 先初始化核心样式与主题
@include mat.core();
$custom-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  )
));
@include mat.all-component-themes($custom-theme);

// 再调用表单字段覆盖混入
@include mat.form-field-overrides(
  (
    filled-caret-color: orange,
    filled-focus-active-indicator-color: red,
    outlined-caret-color: orange,
    container-height: 48px, // 必须添加长度单位，无单位值无法被识别
  )
);

2. 修正令牌的有效值与名称 #

• container-height参数需要带长度单位（如px、rem），你之前写的2没有单位，属于无效值，会导致该配置失效，甚至可能影响其他令牌的解析。
• 核对Angular Material 19官方文档中的令牌名称，确保拼写完全正确，避免因令牌名称错误导致样式不生效。

3. 匹配表单字段的外观类型 #

确保你配置的令牌与实际使用的表单字段外观一致：

• 如果使用的是appearance="filled"的表单字段，outlined-caret-color这类针对outlined外观的令牌不会生效；
• 反之，若使用appearance="outlined"，则filled-*系列令牌不会起作用。

4. 清除缓存并重新构建 #

Angular的缓存可能导致样式未更新，执行以下命令清理缓存后重新构建项目：

ng clean
ng build

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