css - 更改禁用 Material 填充输入的背景

Question

使用 Angular Material 我可以改变这个 fill-matInput 的背景:

<mat-form-field>
  <mat-label>Tax-number</mat-label>
  <input type="text" matInput [id]="'taxnumber'" [formControl]="controlContainer.control.controls['taxnumber']">
  <mat-error>{{controlContainer.control.controls['taxnumber'].errors | bsErrorMessage}}</mat-error>
</mat-form-field>

我可以使用以下 css 更改背景:

.mat-form-field-appearance-fill
.mat-form-field-flex {
    background: rgba(255, 255, 255, 1);
}

现在我想在禁用时更改控件的背景。我最好的猜测是

.mat-form-field-appearance-fill:disabled
.mat-form-field-flex:disabled {
    background: rgba(255, 15, 15, 1);
}

但这行不通。那么我该如何更改禁用的 Angular Material 填充输入的背景呢？

我为这个问题创建了一个 stackblitz: https://stackblitz.com/edit/angular-bcqsjo

Answer 1

查看您的 stackblitz 链接 我刚刚打开 chrome 开发工具并检查了禁用字段。这是正在应用的 css:

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
    background-color: rgba(0,0,0,.02);
}

所以父级上多了一个类(mat-form-field-disabled)。您更新后的代码将是:

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
    background: rgba(255, 255, 255, 1);
}