修改legacy外观mat-form-field下划线颜色不生效怎么办

踩中率极高的几个无效原因 #

• 核心属性写错：legacy外观的下划线根本不吃color属性。不管是常态的细底线，还是聚焦时扩散的粗涟漪线，这些线条都是用元素的background-color渲染的，你之前写的color:red对线条颜色完全没有影响——这是你写了一堆选择器却没看到效果的最关键原因。
• 无效类名匹配：你之前选择器里写的.mat-form-field-legacy-thick类，在当前主流Angular Material版本中早就被移除了，写了也匹配不到任何实际渲染的DOM元素，属于冗余代码。
• 样式隔离拦着：Angular组件默认开启模拟式样式隔离，如果你把自定义样式写在组件局部的style文件里，直接写裸的.mat-form-field-xxx类选择器是选不中的——Angular会自动给你的样式加上组件专属的_ngcontent-*属性标识，而Material内部渲染的DOM元素没有这个标识，自然就匹配不上。
• 样式权重被压：Material默认主题本身带的下划线样式权重，比你写的单类选择器高，就算属性写对了，自定义样式也会被默认的主题蓝色覆盖。
• 目标类根本不存在：从Angular Material 15开始，mat-form-field的默认外观从legacy改成了outline，如果你没有显式声明使用legacy外观，组件渲染出来根本不会带mat-form-field-appearance-legacy的类名，所有对应选择器全部失效。

可直接复用的正确实现代码 #

1. 样式写在组件局部style文件的场景 #

需要加::ng-deep穿透样式隔离，正确写法：

::ng-deep .mat-form-field-appearance-legacy {
  // 常态下的默认细下划线
  .mat-form-field-underline {
    background-color: red;
  }
  // 聚焦状态的加粗涟漪线
  &.mat-focused {
    .mat-form-field-ripple,
    .mat-form-field-underline {
      background-color: red;
    }
  }
}

如果写了之后还是被默认主题覆盖，可以临时在属性值后面加!important提高优先级。

2. 样式写在全局styles.scss的场景 #

不需要加::ng-deep，直接写对应选择器即可：

.mat-form-field-appearance-legacy {
  .mat-form-field-underline {
    background-color: red;
  }
  &.mat-focused {
    .mat-form-field-ripple,
    .mat-form-field-underline {
      background-color: red;
    }
  }
}

3. Material 15+版本必须做的模板调整 #

因为高版本默认不用legacy外观了，要在mat-form-field标签上显式声明，否则DOM上根本不会有你要匹配的类名：

<mat-form-field class="block" appearance="legacy">
    <input type="text" matInput placeholder="{{ 'AUTH.username' | translate }}" formControlName="username" required>
    <mat-error *ngIf="submittedForm && loginForm.controls.username.invalid">{{ getErrorMessage('username') }}</mat-error>
</mat-form-field>

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