Angular Material - mat-menu 的动态样式

Question

我想对 mat-menu 的内容应用动态样式。我知道我可以使用panelClass来分配一个类，但我的类是动态的。

对于这种情况，Angular 具有[ngStyle]或仅[style.attribute]绑定，但这不适用于 mat-menu（或其他叠加层），它仅适用于直接渲染的元素。

我正在寻找像panelStyle这样的东西，它允许我直接在包含 mat-menu 的面板上动态设置样式。

这是一个代码示例，其中 panelClass 允许我设置一些 css，但只有静态一个，ngStyle 没用。

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

我在找什么：

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

Answer 1

您可以将菜单内容包装在单个 DIV 中，并对其动态应用样式。使用背景颜色，要让它填满整个面板，您需要调整边距和填充。例如：

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