如何修改Angular Material选择面板的字体大小？

我们可以通过panelClass自定义Angular Material选择面板的CSS样式，但直接给面板类设置font-size不会生效——因为字体样式实际由面板内的<mat-option>元素控制。

原代码示例 #

模板代码：

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" panelClass="select-style">
    <mat-option *ngFor="let topping of toppingList" [value]="topping">
      {{topping}}
    </mat-option>
  </mat-select>
</mat-form-field>

原样式代码：

.select-style {
  font-size: 2px !important;
  border-radius: 20px !important;
  border: 1px solid gray !important;
  position: absolute !important;
  top: 12px !important;
  height: 10rem;
}

修改后的样式代码 #

要修改面板内选项的字体大小，需要通过后代选择器定位到<mat-option>的文本容器：

.select-style {
  border-radius: 20px !important;
  border: 1px solid gray !important;
  position: absolute !important;
  top: 12px !important;
  height: 10rem;
}

/* 定位到选项文本元素，覆盖默认字体大小 */
.select-style .mat-option-text {
  font-size: 12px; /* 替换为你需要的字体大小值 */
}

说明 #

Angular Material的<mat-option>会自动将文本内容包裹在带有mat-option-text类的元素中，直接给面板容器设置font-size无法穿透到该子元素。通过指定.select-style .mat-option-text选择器，就能精准覆盖选项的字体样式；如果默认样式优先级过高，也可以给font-size加上!important强制覆盖。

内容的提问来源于stack exchange，提问作者Ole