css - 如何修改 mat-form-field 轮廓？

Question

我有一个步进表单，它允许用户从以前保存的数据中编辑详细信息。当先前的数据无效时，表单域必须在加载表单时显示警告。警告文本正在显示，但大纲未显示。轮廓应为黄色，与警告文本相同。黄色轮廓仅在用户开始编辑表单时起作用，但它应该在加载时显示。这是代码：

<mat-form-field
                appearance="outline"
                class="width-1"
                [ngClass]="{
                  'mat-form-field-invalid warning': deptAeroWarning
                }"
              >
                <mat-label>Departure Aerodrome (ICAO)</mat-label>
                <input
                  maxlength="4"
                  matInput
                  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-appearance-outline.mat-form-field-invalid.mat-form-field.mat-form-field-invalid.warning
  .mat-form-field-outline-thick {
  color: #fbbb21 !important;
  opacity: 0.8 !important;
}