css - Angular Material MatFormField 外观 ="fill"主题问题

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; 
  }
}