如何修改Angular mat-form-field聚焦时mat-label与边框颜色

原写法失效原因 #

mat-label:focus选择器无法命中目标样式，核心逻辑是：mat-form-field的聚焦状态挂载在表单容器自身的mat-focused状态类上，并非mat-label元素触发:focus伪类。默认聚焦色样式由Material主题预生成，选择器优先级高于直接标签选择器，因此样式不会生效。

合规实现方案 #

以下两种均为官方支持的写法，无需使用!important强制覆盖样式：

方案1：CSS自定义属性局部修改（单组件调整推荐） #

Angular Material 15+ 版本为表单组件暴露了聚焦态对应的CSS自定义属性，直接给表单字段的自定义类设置对应变量即可，无需依赖内部类名，兼容后续版本迭代：

.example-chip-list {
  /* 聚焦态底部边框颜色 */
  --mdc-filled-text-field-focus-active-indicator-color: red;
  /* 聚焦态mat-label文字颜色 */
  --mdc-filled-text-field-focus-label-text-color: red;
}

如果使用Angular默认的视图封装模式时样式未生效，增加:host前缀匹配组件宿主元素，提升选择器优先级即可：

:host .example-chip-list {
  --mdc-filled-text-field-focus-active-indicator-color: red;
  --mdc-filled-text-field-focus-label-text-color: red;
}

若使用appearance="outline"外观的表单字段，替换为以下变量即可：

--mdc-outlined-text-field-focus-outline-color: red;
--mdc-outlined-text-field-focus-label-text-color: red;

方案2：自定义主题全局配置（全站统一调整推荐） #

如果需要全站统一所有Material组件的聚焦色，直接通过自定义主题配置实现，无需编写任何组件级覆盖样式：

• 在全局样式文件中定义符合需求的自定义主色调色板
• 基于自定义调色板生成Material主题配置
• 全局引入主题后，所有Material组件（包括内嵌mat-chip-list的mat-form-field）的聚焦态会自动应用自定义主色

避坑说明 #

网上流传的直接覆盖.mat-form-field-label、.mat-form-field-ripple等内部类的写法，因为选择器优先级匹配不当才需要加!important，这类内部类名可能随版本迭代变更，不属于官方公开API，不推荐使用。

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