Угловой материал mat-menu-item должен быть того же размера, что и кнопка mat-menu

Question

Я использую mat-menu Angular Material с другим 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>

Я сделал StackBlitz ЗДЕСЬ для моего меню.

Заранее спасибо!

РЕДАКТИРОВАТЬ: Я изменил свой код, потому что я использую отзывчивую кнопку с классом начальной загрузки"БТН-блок".

Answer 1

Я нашел решение действительно не чистым, но вот оно: StackBlitz ЗДЕСЬ

Если у кого-то получше, я беру.

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;}

DEMO:

Answer 2

Используйте ::ng-deep для стиля .mat-menu-panel

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

См. Рабочий код