Angular Material MatFormField外观=“填充”主题问题

Question

我有一个关于 Angular Material 主题的问题，特别是 MatFormField 指令。可能在 Material v6 左右，我发现该matFormField指令有新的选项，例如appearance="fill"和appearance="outline"，我发现appearance="fill"有用，但我想知道如何更改正在使用的填充的背景颜色。

我尝试了几种方法，例如，

<input class="w-100 bg-white form-control" #tileFilter 
          [formControl]="filterBy" 
          [matAutocomplete]="spiritilesAutocomplete"
          [matChipInputFor]="chipList"
          placeholder="Search by... Keyword, Author, Title, Story, etc."
          > 

我也尝试过选择

mat-form-field .mat-form-field-flex{
    background-color: white; 
}

特别是选择和设置 mat-form-field 样式的许多其他变体，但我找不到 css 选择器，也找不到文档中对背景颜色的 api 引用。我看到 Material 允许对下划线部分和标签进行主题化，但我想专门针对背景颜色。谁能指出我正确的方向。

Answer 1

在这种情况下，请在组件 css 文件中使用 ng-deep。

::ng-deep {
  .mat-form-field .mat-form-field-flex{
    background-color: white; 
  }
}

Answer 2

您需要添加!important背景颜色值才能使其正常工作：

.mat-form-field-flex {
    background-color: white !important;
}