如何修改指定mat-form-field字段的背景色，避免全表单字段样式被修改

1. 给目标表单字段添加自定义类 #

修改你对应的组件模板代码，给需要设置浅灰背景的mat-form-field标签新增一个专属自定义类，示例如下：

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

这里新增的custom-gray-bg就是用来限定样式作用范围的标识，你也可以替换为自己习惯的类名。

2. 调整CSS样式代码 #

将你原来的全局样式调整为带自定义类前缀的写法，仅命中指定字段：

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

原代码没有加限定前缀，会匹配所有outline样式的mat-form-field组件，加上自定义类前缀后，样式只会作用在你指定的字段上，不会影响其他表单组件。

内容的提问来源于stack exchange，提问作者Rence Sacramento