更改 Angular 材料 Select 面板的字体大小？

Question

我们可以使用panelClass更改通用面板 css 样式。

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

这是一个 stackblitz 演示。

除了font-size之外的所有设置都在生效。 它不会改变。 关于如何更改面板字体大小的任何想法？

Answer 1

尝试这个

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

---

原因：字体大小在.select-style内的mat-option上设置为

<mat-option role="option" 
 class="mat-mdc-option mat-mdc-focus-indicator mdc-list-item..."...>...<mat-option>

css

.mat-mdc-option {
    /*...*/
    font-size: var(--mdc-typography-body1-font-size, 16px);
    /*...*/
}

我们必须覆盖mat-option font-size集。