html - Angular 7 - 如何设置 Material 菜单的样式以使元素彼此靠近

Question

我是 Angular 的新手，正在徘徊如何设计 Material Design (MD) 菜单的样式。 此菜单主要用于桌面应用程序，看起来应该类似于标准桌面应用程序(例如 MS Excel)中的菜单。

我在网上搜索过，但没有得到明确的答案。

默认情况下，Angular MD 菜单项相距很远——它们之间的间距很大。所以它们看起来像这样(我在这里使用文本只是为了可视化):

Item A1

Item A2 >   Item A2-B1

Item A3     Item A2-B2

etc.        Item A2-B3 >     etc. 

            etc.

我们如何覆盖 MD 默认样式并减少菜单按钮 - 更小的字体，更小的尺寸，没有或最小的间隙，所以我们得到一个紧凑的小菜单，占用最少的空间并在菜单中容纳更多元素 - 例如:

Item A1
Item A2 >   Item A2-B1
Item A3     Item A2-B2 >     etc. 
etc.        Item A2-B3

示例 menu.component.html 文件:

<div>
  <button mat-button [matMenuTriggerFor]="menu" 
          class="myMenuItem">Menu</button>
  <mat-menu #menu="matMenu" [class]="myMenu" > 
    <button mat-menu-item class="myMenuItem">Item 1</button>
    <button mat-menu-item class="myMenuItem">Item 2</button>
  </mat-menu>
</div>

请您概述样式，如果有可能修改/配置导航和按钮组件的 MD 默认样式以控制它们的大小和外观，请提供说明或链接。谢谢。

Answer 1

如果是 Angular Material 菜单组件？如果你想通过 css 解决它？那就试试吧

.mat-menu-item{
    line-height: 20px;
    height: 20px;
}