mat-form-field 选择按钮背景颜色适用于所有 div 而不是按钮答案

【问题标题】：mat-form-field select button background color apllies to all div instead of the buttonmat-form-field 选择按钮背景颜色适用于所有 div 而不是按钮
【发布时间】：2020-09-21 02:07:38
【问题描述】：

我有一个角度材质的选择按钮，我正在尝试应用白色的背景颜色，但是当我这样做时，所有 div 都保持白色，而不仅仅是 div。

我尝试逐个选择选择按钮并应用白色，但按钮有很多穿孔，我必须做错事，因为它不应该是这样的。

这是我的白色背景按钮：

html：

 <mat-form-field style="background-color: white">
          <mat-select placeholder="Zone" (selectionChange)="updatePlayerZone($event)" style="font-family: beaufort, serif;font-size: 16px">
            <mat-option value="br">BR</mat-option>
            <mat-option value="eune">EUNE</mat-option>
          </mat-select>
  </mat-form-field>

我应该添加什么以仅使按钮的背景变为白色而不是所有 div？

PS：是的 div 没有 background-color

【问题讨论】：

欢迎来到 Stackoverflow。您能否澄清一下您的意思：“所有 div 都保持白色，而不仅仅是 div。”并且在您提供的图像中，您认为哪个位是“按钮”。谢谢。
您可以尝试输入完整的代码，以便我们查看错误发生的情况并重现问题。

标签： javascript html css angular

【解决方案1】：

尝试以下 css，我认为 ViewEncapsulation.None 很重要：

CSS：

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

TS：

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'form-field-appearance-example',
  templateUrl: 'form-field-appearance-example.html',
  styleUrls: ['form-field-appearance-example.css'],
  encapsulation: ViewEncapsulation.None
})

【讨论】：

【解决方案2】：

我会鼓励您使用Angular Material's theming capabilities 而不是关闭封装，使用!important 或::ng-deep（即将弃用）等。

如果您不想使用主题，您可以将覆盖的 CSS 移动到全局级别 (src/styles.scss) 以避免关闭封装。

.mat-form-field-label{
  color:green !important;
}
.mat-form-field-underline{
  background-color:green !important;
}

【讨论】：