使用mat-form-field更改特定字段的背景色

Question

因此，我有一个现有的mat-form-field，我想要更改特定字段的背景色。我在css中尝试过这段代码，但它改变了表单中所有字段的背景颜色：

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    background-color: lightgray !important;
    border-radius: 5px;  
}

下面是我的mat-form-field的代码：

<mat-label>Filing Time</mat-label><br />
              <mat-form-field appearance="outline" class="width-1">
                <input
                  matInput
                  readonly
                  formControlName="filingTime"
                  [ngModel]="filingDate | date: 'HH:mm'"
                />
              </mat-form-field>

​

​

Answer 1

使用工作示例更新了

您可以通过提供id或类来更改将任何CSS应用于特定元素。

以下是使用Class执行此操作的代码

::ng-deep .mat-form-field-appearance-outline.specific-border .mat-form-field-outline  {
    background-color: lightgray !important;
    border-radius: 5px;  
}

<mat-label>Filing Time</mat-label><br />
              <mat-form-field appearance="outline" class="width-1 specific-border">
                <input
                  matInput
                  readonly
                  formControlName="filingTime"
                  [ngModel]="filingDate | date: 'HH:mm'"
                />
              </mat-form-field>

以下是使用Id执行此操作的代码

::ng-deep .mat-form-field-appearance-outline#specific-border .mat-form-field-outline  {
    background-color: lightgray !important;
    border-radius: 5px;  
}

<mat-label>Filing Time</mat-label><br />
              <mat-form-field appearance="outline" id="specific-border" class="width-1">
                <input
                  matInput
                  readonly
                  formControlName="filingTime"
                  [ngModel]="filingDate | date: 'HH:mm'"
                />
              </mat-form-field>

Demo Stackbiltz