Angular Material中，控制mat-form-field下划线颜色的类是什么？

一、修改浮动标签文本颜色 #

你已经通过以下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）颜色 #

注意mat-form-field-ripple是旧版Angular Material的类，在基于MDC的新版本中，下划线由mdc-line-ripple及其子元素控制，需针对不同状态设置样式：

• 默认状态下划线颜色
  修改下划线的基础边框色：

  ::ng-deep .mdc-text-field--filled .mdc-line-ripple::before {
      border-bottom-color: #8626C3 !important;
  }
  

• 聚焦状态下划线波纹颜色
  聚焦时的动态波纹效果需要修改mdc-line-ripple__active的背景色：

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

• 悬浮状态下划线颜色
  如果需要调整鼠标悬浮时的下划线样式：

  ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-line-ripple::before {
      border-bottom-color: #8626C3 !important;
  }
  

这些样式分别覆盖了下划线的默认、聚焦、悬浮三种状态，确保所有场景下的颜色都符合你的需求。

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