Question

我有一个关于Angular Material主题的问题，特别是MatFormField指令。大概在Material v6周围，我发现matFormField指令具有新的选项，例如，外观=“填充”和外观=“轮廓”，我发现外观=“填充”很有用，但是我想知道如何更改使用的填充的背景色。

我尝试了几种方法，例如

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

角材料MatFormField外观=“填充”主题问题

2 个答案: