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

Question

我将 Angular Material 的 mat-menu 与不同的 mat-menu-item 一起使用，并且我希望菜单项列表与按钮的大小相同。

这就是我所拥有的：

还有我的愿望：

我试图用 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>

我在这里为我的 mat-menu做了一个StackBlitz。

先感谢您！

编辑：我更改了我的代码，因为我使用的是带有引导程序类“btn-block”的响应式按钮。

Answer 1

我发现一个解决方案确实不干净，但它是：StackBlitz HERE

如果有人有 CSS 解决方案，我很感兴趣。

HTML：

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

TS：

export class AppComponent implements DoCheck{
  ngDoCheck(){
    var widthButton=document.getElementById("button").offsetWidth;

    var elems = document.getElementsByClassName('mat-menu-panel');
    for(var i = 0; i < elems.length; i++) {
      elems[i].style.width = widthButton+"px";
    }
  }
}

CSS：

.cdk-overlay-pane {width: 100%!important;}
.mat-menu-panel {max-width: 100%!important; min-width: 64px!important;}

演示：