如何创建自定义 Angular Material 垫菜单项？

Question

我希望菜单项以完全自定义的方式显示（特别是多行文本、各种字体大小和颜色），但它似乎只显示第一行文本。例如：

<mat-menu>
  <div mat-menu-item>
    <div>Text1</div>
    <div style="font-size: 8px;">Text2</div>
  </div>

只显示“Text1”，不显示“Text2”。

我该如何做才能使这项工作成功？ 非常感谢！

Answer 1

根据迁移到基于 MDC 的角度材质组件：

在 Angular Material v15 中，许多组件已基于官方的 Material Design Components for Web (MDC) 进行了重构。

这就是为什么我在评论中分享的 Angular Material v16 演示可以工作，但 Angular Material v12 却不起作用。

您必须升级到 Angular Material v15（Angular 版本 15）或自定义现有的

<mat-menu>

和类似于 MDC 方式的样式。

<mat-menu #menu="matMenu">
  <div mat-menu-item>
    <div class="primary_text">
      <div>Text1</div>
      <div style="font-size: 8px;">Text2</div>
    </div>
  </div>
</mat-menu>

样式.css

html {
  --mat-menu-item-label-text-size: 16px;
  --mat-menu-item-label-text-tracking: 0.03125em;
  --mat-menu-item-label-text-line-height: 24px;
  --mat-menu-item-label-text-weight: 400;
}

.mat-menu-item {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  position: relative;
  justify-content: flex-start;
}

.mat-menu-item .primary_text {
  -webkit-font-smoothing: antialiased;
  line-height: var(--mat-menu-item-label-text-line-height);
  font-size: var(--mat-menu-item-label-text-size);
  letter-spacing: var(--mat-menu-item-label-text-tracking);
  font-weight: var(--mat-menu-item-label-text-weight);
}

演示@StackBlitz