css - 如何自定义 mat-form-field 设计？

Question

所以，我有一个 mat-form-field，只要用户输入一个不属于数据库的字符串，它就会抛出一个警告。我能够抛出警告，但问题是 mat-form-field 的设计在抛出警告消息时不一致。首次加载应用程序时，警告正常工作，但当我尝试编辑字段内的字符串时，设计与我预期的设计不同。这是我的 HTML 代码：

           <mat-form-field
                  appearance="outline"
                  class="width-1"
                  [ngClass]="{
                    'mat-form-field-invalid warning': deptAeroWarning
                  }"
                >
                  <mat-label>Departure Aerodrome (ICAO)</mat-label>
                  <input
                    matInput
                    maxlength="4"
                    minlength="4"
                    name="departureAerodrome"
                    id="departureAerodrome"
                    formControlName="departureAerodrome"
                    placeholder="Departure Aerodrome (ICAO)"
                    (input)="inputDeptAero(departure.value)"
                    #departure
                    required
                  />
                  <mat-error *ngIf="!deptAeroWarning"
                    >Error! The ICAO code is not correct. The length should be 4
                    characters.</mat-error
                  >
                  <mat-hint class="warning" *ngIf="deptAeroWarning">{{
                    icaoWarningMsg
                  }}</mat-hint>
                </mat-form-field>

这是css代码：

::ng-deep .mat-hint.warning {
  color: #fbbb21;
}

::ng-deep .mat-form-field.mat-form-field-invalid.warning .mat-form-field-label {
  color: #fbbb21 !important;
}

::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field.mat-form-field-invalid.warning
  .mat-form-field-outline-thick {
  color: #fbbb21;
  opacity: 0.8; 
}