Angular 查找元素的选择器以更改颜色答案

【问题标题】：Angular Find the selector of an element to change the colorAngular 查找元素的选择器以更改颜色
【发布时间】：2021-01-06 18:29:27
【问题描述】：

我有一个按钮，mat-form-field 选择按钮，我的问题是改变它的颜色。我找不到合适的选择器。

按钮样式如下：

enter image description here

app.component.html

<div id="zoneButtonZone">
    <mat-form-field>
        <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>

我尝试了以下CSS 代码，但不起作用：

app.component.css

#zoneButtonZone.mat-form-field-infix {
  background: white;
}
.mat-form-field-appearance-legacy .mat-form-field-infix {
  background: white;
}
#zoneButtonZone > mat-form-field > div > div.mat-form-field-flex.ng-tns-c49-1 > div {
  background: white;
}
.mat-form-field-appearance-legacy .mat-form-field-infix {
  background: white;
}
.mat-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-form-field-flex {
  background: white;
}

我不知道改变背景颜色的选择器是什么。我尝试了所有的选择器。

【问题讨论】：

你是在组件样式表中还是在 style.css 中使用这个 css。
尝试使用 - ::ng-deep {.mat-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-form-field-flex {背景：白色； } }

标签： css angular angular-material

【解决方案1】：

尝试为您的按钮应用一个类并在 css 中使用该类。

例如

<div id="zoneButtonZone">
  <mat-form-field class="select-btn">
          <mat-select placeholder="Zone" (selectionChange)="updatePlayerZone($event)">
            <mat-option value="br">BR</mat-option>
            <mat-option value="eune">EUNE</mat-option>
          </mat-select>
  </mat-form-field>

然后在你的css中，你可以指定：

.select-btn {
  background-color: white;
}

【讨论】：