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

js81xvg6 于 2023-11-19 发布在 Angular

关注(0)|答案(4)|浏览(176)

我有一个关于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引用。我看到材料允许主题的下划线部分和标签，但我想具体目标的背景颜色。有人能给我指出正确的方向吗？

css

来源：https://stackoverflow.com/questions/53615868/angular-material-matformfield-appearance-fill-theming-questions

4条答案

按热度按时间

5cg8jx4n1#

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

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

字符串

赞(0）回复(0）举报 2023-11-19

0h4hbjxa2#

您可以尝试：

::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: #fff;
}

字符串

赞(0）回复(0）举报 2023-11-19

5kgi1eie3#

您需要将!important添加到background-color值，以使其工作：

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

字符串

赞(0）回复(0）举报 2023-11-19

y1aodyip4#

如果你使用的是Angular ~v14（不确定确切的版本是否兼容），下面的CSS代码应该可以工作：

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

字符串
您需要将部分'.mat-form-field-appearance-fill'替换为元素的类。
然而，在v16左右（不确定具体是什么时候），代码停止了工作，现在对我来说这是有效的：

::ng-deep .mat-mdc-text-field-wrapper {
  background-color: white;
}

型
请注意，如上所述，在开头添加：：ng-deep可能会影响目标之外的元素。避免这种情况的一种方法是将目标元素 Package 在一个div中，为该div分配一个类，并在：ng-deep之前添加类选择器，以仅针对该div中的目标元素。

赞(0）回复(0）举报 2023-11-19

我来回答

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

4条答案

相关问题

热门标签

最新问答