Css 设置菜单样式

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

我想设计我的

mat菜单

和

mat菜单项

，我尝试过这样做：

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

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

拨号盘
简历
语音信箱
文件夹
通知关闭
工具书类
通知关闭
接触

---

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

app.component.ts

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

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

export class AppComponent {
  constructor() { }
}

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

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

my.component.css

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

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

export class AppComponent {
  constructor() { }
}

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

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

---

我通常使用它来设置高度和溢出css的样式，但总体思路应该仍然代表背景色。请注意，可能还有其他具有背景色的叠加div，但您应该能够通过其

.mat菜单-

css以这种方式访问它们，并以相同的方式更改子项。

在css中定义原始

背景色

和

鼠标上方

颜色：

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

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

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

---

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

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

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

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

另一种方式： 您可以将backdropClass添加到菜单中

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

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

---

这也是在不影响其他人的情况下完成的，但在样式中添加css。css可能有点不方便。

I使用

：ng deep
I自定义角度材质元素
mat菜单

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

它被应用到mat menu的每一个内部类中，这是另一个解决方案，它（1）允许我们保留默认的视图封装，（2）不需要不推荐的：：ng deep

app.component.html

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

此解决方案在Angular/Components git存储库中提供：

此解决方案的原始作者在这里提供了一个stackblitz:
。mat菜单面板
可能会有帮助，还可以使用
ViewEncapsulation。无
面板调用没有任何作用，我不确定在哪里将ViewEncapsulation设置为无？D:我会继续写一个更详细的答案给你，我必须编辑答案，以明确你的根组件控制
mat菜单
，并且需要控制
封装
。我开始工作了，只是想知道，这个视图封装设置会影响html文件中调用的孩子们吗，或者只是文件本身谢谢！我只是想知道如何也编辑淡入淡出的颜色，它从“默认”灰色开始，然后淡入我设置的自定义颜色，就像你显示的那样，这只是尝试和错误吗？我不是在问，因为我想暗示你错了，只是想知道你是否知道，谢谢你这个绝妙的解决方案！更新2：我真的需要再次说声谢谢，这个补丁让我最终可以轻松有效地定制Material 2中的所有内容！！更新3：这导致在移动浏览器上呈现时出现非常奇怪的问题（即启用封装），所以请注意@Cacoon这个答案现在已经被弃用了，因为他们添加了一个输入指令来直接注入你想要的任何类：
@input（'class'）panelClass:string
Awesome，material不断取得巨大进步这对我很有帮助，谢谢。亲爱的用户请避免使用！重要的是，第二条路似乎不错。。由于
ng deep
已被弃用
和
：：ng deep.mat-menu-panel.contrast{background:red；}
为我做了这件事