自定义 angular material mat-menu-item 以显示尺寸较小的项目（包括宽度和高度）

Question

我正在开发一个使用 angular material 组件的 angular 应用程序。在网格中，我有应该支持的内联操作（可以编辑、删除和更多操作）。

目前，当我在网格中嵌入 mat-menu 组件时，项目列表显示非常大的菜单项。我想自定义菜单项的大小（宽度和高度）。

有没有办法做到这一点

当前行为：

期望：

此外，我正在寻找下拉菜单，如下面的屏幕截图所示（菜单下拉项以绿色边框突出显示。我们可以注意到下拉菜单在图标正下方变得干净，并形成一个清晰的框来显示菜单项。)

但是，在默认菜单中，所选下拉菜单没有明确的突出显示或边框。

比如我下面实现的，头像下方的下拉菜单渲染如下。与之前的截图相比，之前的截图看起来干净多了。

代码#

<button mat-icon-button [matMenuTriggerFor]="profileMenu" *ngIf="userIsAuthenticated">
    <!-- <i class="fa fa-user white-icon" aria-hidden="true"></i> -->
    <img class="avatar" src="../../assets/1.jpg">
  </button>

  <mat-menu #profileMenu="matMenu">
    <button mat-menu-item routerLink="/profile"> <i class="fa fa-user" aria-hidden="true"></i> Profile </button>
    <button mat-menu-item (click)="onLogout()"> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout </button>
  </mat-menu>

添加后的变化 CSS 类

::ng-deep .mat-menu-content {
  width: 200px !important; 
  height: 120px !important; 
}

Answer 1

尝试在您的 css 文件中添加以下内容

::ng-deep .mat-menu-content {
  width: 250px !important; // as you wish
  height: 200px !important; // as you wish 
}

Answer 2

以下 CSS 将满足您的需求。

::ng-deep .mat-menu-content {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

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

Stackblitz

https://stackblitz.com/edit/angular-uddgqx?embed=1&file=app/menu-overview-example.css

自定义 angular material mat-menu-item 以显示尺寸较小的项目（包括宽度和高度）

Customize angular material mat-menu-item to show items smaller in size (both width and height)

angular

angular-material-7