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

角材料-垫菜单的动态样式

1 个答案: