Angular 物料表单字段输入-输入有效时绿色边框

Question

当输入valid而不覆盖 CSS 类时，我试图将mat-form-field的边框更改为绿色，我确信我错过了一个简单的技巧。

输入有效字段值时的默认行为：

输入有效字段值时的期望行为（与输入处于活动状态时相同或相似的样式）：

Answer 1

我认为如果你使用材质主题，你可以在 mat-form-field 元素中使用颜色属性

Answer 2

到目前为止，我找到了适合我的解决方案。 我不是 css 专业人士，所以如果这有任何副作用，我很乐意了解它。

编辑：我读了你说没有 CSS 覆盖的部分，这里是一个线程，有不同的方法来改变边框颜色，也许有一些你可以接受的答案。

样式.css：

   mat-form-field {
      // &.ng-valid {
      &.mat-form-field-valid { <- I have custom async validators which execute on submit so I just add a custom class when the form is valid
        .mat-form-field-outline {
          color: green !important;
          border-width: 2px;
        }
     
        .mat-form-field-label {
          color: green;
        }

        .mat-form-field-outline-start {
          border-width: 2px;
        }
    
        .mat-form-field-outline-gap {
          border-width: 2px;
        }
    
        .mat-form-field-outline-end {
          border-width: 2px;
        }
      }
    }

html：

<mat-form-field appearance="outline" [ngClass]="{'mat-form-field-valid': form?.valid }">