更改角度材料选择面板的字体大小？

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

This is a stackblitz demo。

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

---

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

<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-optionfont-size集。