什么类决定 mat-form-field 下划线颜色？

Question

在有角度的材料中，包含输入元素的垫表单字段采用默认颜色，我想覆盖文本和下划线的颜色。

我可以使用 scss 文件中的以下代码更改文本颜色。

::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
    color: #8626C3 !important;
  }

但无法从检查窗口找到下划线元素。另外，我发现了 mdc-line-ripple 类突出显示下划线元素。 因为，

::ng-deep .mdc-line-ripple {
    display : none 
  }

使下划线消失。

我尝试执行以下操作

  ::ng-deep .mat-form-field-ripple {
    color: #8626C3 !important;
  }

尽管尝试了颜色、背景、背景颜色属性，但对所述元素没有任何影响。

Answer 1

表单字段下划线具有波纹效果，并且实际边框是通过

::before

伪元素添加的，从 Angular Material v18 开始。

要覆盖 Angular Material v18 中的表单字段下划线颜色，最好的选择是使用 CSS 变量：

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  --mdc-filled-text-field-active-indicator-color: #8626C3;
}

在 Angular Material v19 中，提供了覆盖 SASS API，它允许您自定义下划线，如下所示：

@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.form-field-overrides((
    filled-active-indicator-color: #8626C3;
  ));
}