Angular Material - динамичный стиль для мат-меню

Question

Я бы хотел применить динамический стиль к содержанию mat-menu. Я знаю, что могу использовать panelClass для назначения класса, но мой класс динамический.

Angular имеет привязку [ngStyle] или просто [style.attribute] для таких случаев, но это не работает в mat-menu (или других оверлеях), оно работает только с элементами, отображаемыми напрямую.

Я ищу что-то вроде panelStyle , который позволил бы мне динамически устанавливать стили непосредственно на панели, содержащей меню mat.

Вот пример кода, где panelClass позволяет мне устанавливать некоторые CSS, но только статический и ngStyle бесполезен.

<mat-menu [ngStyle]="{'background-color': colorVariable }" panelClass="some-static-class-works">

Что я ищу:

<mat-menu [panelStyle]="{'background-color': colorVariable }">

Answer 1

Вы можете обернуть содержимое своего меню в один DIV и динамически применять стиль к нему.С background-color, чтобы он заполнил всю панель, вам нужно настроить поля и отступы.Например:

<mat-menu>
  <div [ngStyle]="{'background-color': colorVariable }" class="menu-panel">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </div>
</mat-menu>

.menu-panel {
  margin: -8px 0; 
  padding: 8px 0;
}