设置 mat-menu 样式答案

【问题标题】：Set mat-menu style设置 mat-menu 样式
【发布时间】：2018-03-30 23:14:06
【问题描述】：

我在这方面遇到了很多麻烦，并且明显的解决方案不起作用或我做错了什么（可能是后者）。

我想为我的mat-menu 和mat-menu-item 设置样式，我试过这样做：

::ng-deep .mat-menu{
  background-color:red;
}

但它不起作用，我的菜单看起来像这样（没有异常）

<mat-menu #infoMenu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Resume</span>
  </button>
  <button mat-menu-item>
    <mat-icon>voicemail</mat-icon>
    <span>Portfolio</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>References</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Contact</span>
  </button>
</mat-menu>

我也尝试过 /deep/ 但我知道它不应该起作用，实际上应该在 Angular 4 中贬值，但我这样做是为了测试，我现在不确定如何设置元素的样式。

【问题讨论】：

.mat-menu-panel 可能会有所帮助，以及使用ViewEncapsulation.None
面板调用很遗憾没有做任何事情，我不确定我会在哪里将该 viewencapsulation 设置为 none？ D：
我会继续为你写一个更详细的答案
我必须编辑答案以明确您的根组件控制mat-menu 并且需要控制encapsulation。
我得到它的工作，只是想知道，这个viewencapsulation设置，它会影响在html文件中调用的孩子，还是只是文件本身

标签： css angular sass angular-material2

【解决方案1】：

更简单的方法 如果你只想改变你的组件而不影响其他组件，你应该在菜单中添加一个类。

<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>

然后使用 ::ng-deep 设置菜单样式。

::ng-deep .customize {
  background: red;
}

瞧！！您的自定义不会影响其他组件。

另一种方式： 您可以将背景类添加到菜单中。

 <mat-menu #infoMenu="matMenu" backdropClass="customize"></mat-menu>

然后在你的styles.css中添加带有+*的CSS样式类

.customize+* .mat-menu-panel {
  background: red;
}

这也是在不影响别人的情况下完成的，但是在styles.css中添加css可能有点不方便。

【讨论】：

第二种方式似乎不错......因为ng-deep已被弃用
<mat-menu [class]="'customize'"></mat-menu> 和 ::ng-deep .mat-menu-panel.constrast { background: red; } 为我做的

【解决方案2】：

app.component.ts

import { Component, ViewEncapsulation ... } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  constructor() { }
}

my.component.css

.mat-menu-content {
    background-color: 'red' !important;
}

我通常使用它来设置高度和溢出 css 的样式，但总体思路仍应代表背景颜色。请注意，可能还有其他带有背景颜色的覆盖 div，但您应该能够通过它们的.mat-menu-<item name> css 以这种方式访问它们并以相同的方式更改子项。

【讨论】：

非常感谢！我只是想知道如何编辑淡入淡出颜色，它从“默认”灰色开始，然后淡入我设置的自定义颜色，就像你展示的那样，这只是反复试验吗？我没有问，因为我试图暗示你错了只是想知道你是否知道，感谢这个出色的解决方案！
更新 2：我真的需要再次表示感谢，这个修复让我终于可以轻松有效地自定义 Material 2 中的所有内容！
更新 3：这会导致在移动浏览器上呈现非常奇怪的问题（即启用封装），所以请注意！
@Cacoon 这个答案现在被弃用了，因为他们已经添加了一个输入指令来直接注入你想要的任何类：@Input('class') panelClass: stringmaterial.angular.io/components/menu/api
太棒了，材料不断进步

【解决方案3】：

在 CSS 中定义原始 background-color 和 mouseover 颜色：

.mat-menu-item {
  color: blue !important;
}

button.mat-menu-item{
    background-color: white;
}

button.mat-menu-item:hover {
    background-color: blue;
    color: #fff !important;
}

【讨论】：

这对我有帮助，谢谢。亲爱的用户避免使用 !important。

【解决方案4】：

另一个解决方案 (1) 允许我们保留默认的 ViewEncapsulation 并且 (2) 不需要已弃用的 ::ng-deep

app.component.html

<mat-menu #infoMenu="matMenu" class="my-class">...

然后在你的全局样式表中

styles.css

.mat-menu-panel.my-class {
  background-color: red;
}

此解决方案在 Angular/Components git 存储库中提供：https://github.com/angular/components/issues/16742

这个解决方案的原作者在这里提供了一个stackblitz：https://stackblitz.com/edit/angular-y3jqzt

【讨论】：

【解决方案5】：

我使用::ng-deep自定义了角度材质元素mat-menu

<mat-menu #createPlan="matMenu" class="custom-menu">
    <button mat-menu-item [matMenuTriggerFor]="profilestypes">Client Profile</button>
          <button mat-menu-item>Supplier Profile</button>
    <button mat-menu-item>Advisor Profile</button>
</mat-menu>

而css类如下

::ng-deep .custom-menu{
  margin-top: 15px;
}

它被应用于每个内部的 mat-menu 类

【讨论】：