Angular Material - mat-menu 的动态样式答案

【问题标题】：Angular Material - dynamic style for mat-menuAngular Material - mat-menu 的动态样式
【发布时间】：2019-08-08 20:58:59
【问题描述】：

我想对 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 }">

【问题讨论】：

我已经用一个简单的例子回复了另一个类似的请求：请检查：stackoverflow.com/questions/55111607/…。可以应用相同的原则来满足您的需求。
我明白您的意思，但在您的示例中，您只是使用必须事先定义的静态类（例如 .red、.green）。我的情况有点复杂，如果我采用你的方法，我将不得不创建数十个静态类，而不是动态创建它们。
但是你可以让它像你想要的那样动态。只需绑定它...您不需要预先配置:)
G.Tranter 提供的答案是一个完全动态的解决方案。您的想法很好，并且可能用于无法引入内部 div 的其他情况。但它需要创建尽可能多的 css 类作为一个人可能需要的动态选项。谢谢 - 我相信它会在其他场景中使用

标签： angular angular-material

【解决方案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;
}

【讨论】：