css - Angular Material mat-menu-item 与 mat-menu 按钮的大小相同

Question

我使用具有不同 mat-menu-item 的 Angular Material mat-menu，我希望菜单项列表与按钮大小相同。

这就是我所拥有的:

还有我的愿望:

我试图用 css 改变菜单的大小，但它不能正常工作。

CSS:

.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}

HTML:

<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue">
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-icon>more_vert</mat-icon>
    <span fxFlex>OPTION</span>
  </div>
</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>unarchive</mat-icon>
    <span>First</span>
  </button>
  <button mat-menu-item>
    <mat-icon>file_copy</mat-icon>
    <span>Second</span>
  </button>
</mat-menu>

我做了一个StackBlitz HERE用于我的垫子菜单。

提前致谢!

编辑:我更改了我的代码，因为我正在使用带有 Bootstrap 类“btn-block”的响应式按钮。

Answer 1

使用 ::ng-deep 设置 .mat-menu-panel 的样式>

::ng-deep .mat-menu-panel {
  padding: 0 10px!important;
  width: 100%!important;
}

See working code