如何在 Angular 中将 mat-menu-item 字体大小更改为小？

Question

<button [matMenuTriggerFor]="menu" mat-button>Options</button>
    <mat-menu class="mat-menu" #ServicesButton #menu="matMenu">
        <button class="mat-menu-item" mat-menu-item>Option 1</button>
        <button class="mat-menu-item" mat-menu-item>Option 2</button>
        <button class="mat-menu-item" mat-menu-item>Option 3</button>
        <button class="mat-menu-item" mat-menu-item>Option 4</button>
    </mat-menu>

现在这个菜单的 css 是 angular 的默认值。 我想更改它，但它无法通过 css class 工作。

我试过使用 css class。没有结果。 我尝试过内联样式。 我只能改变背景颜色。 字体大小不起作用。

Answer 1

你确定吗？ 检查这个。

css

.mat-menu-item{
  font-size: 9px;
}

html

<button [matMenuTriggerFor]="menu" mat-button>Options</button>
    <mat-menu class="mat-menu" #ServicesButton #menu="matMenu">
        <button class="mat-menu-item" mat-menu-item>Option 1</button>
        <button class="mat-menu-item" mat-menu-item>Option 2</button>
        <button class="mat-menu-item" mat-menu-item>Option 3</button>
        <button class="mat-menu-item" mat-menu-item>Option 4</button>
    </mat-menu>

https://stackblitz.com/edit/mat-menu?file=app%2Fmenu-icons-example.html,app%2Fmenu-icons-example.css