我对此有很多麻烦，并且明显的解决方案不起作用，也无法做错事（可能是后者）。

Question

::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中折旧，但我确实进行了测试，我不确定此时如何设计元素。

easierWay

如果您只想在不影响其他组件的情况下更改组件，则应在菜单中添加一类。

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

then风格的菜单with :: ng-deep.

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

Answer 1

维奥拉！您的自定义不会影响其他组件。 Another Way：

您可以在菜单中添加背景库。 <mat-menu #infoMenu="matMenu" backdropClass="customize"></mat-menu>

然后在您的样式中添加 +*的CSS样式类。CSS

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

也是在没有影响他人的情况下完成的，但是在样式中添加CS.CSS可能有点不便。

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，但总体想法仍应代表背景色。请注意，可能还有其他带有背景色的覆盖层，但是您应该能够以这种方式以相同的方式访问它们的cs并更改儿童物品。

Answer 2

.mat-menu-<item name>

和background-color颜色：

mouseover

另一个解决方案（1）允许我们保留默认的视图填充，（2）不需要弃用:: ng-deep

app.component.html

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

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

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

然后在您的全球样式表中

Answer 3

型css

<mat-menu #infoMenu="matMenu" class="my-class">... 在Angular/组件GIT存储库中提供了这一解决方案：

Https：//github.com/angular/components/issues/16742

Answer 4

Https：//stackblitz.com/edit/angular-yangular-y3jqzt

since:: ng-deep被弃用，这就是我自定义的方式

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

mat-menu

在新版本的Angular材料中，我使用了

<mat-menu class="user-menu" #menu="matMenu">
   <button mat-menu-item>Profile</button>
   <button mat-menu-item>Settings</button>
</mat-menu>

的基类，即

mat-menu

mat-mdc-menu-panel

I定制的角材料元素

.mat-mdc-menu-panel.user-menu {
  background-color: red;
}

使用

mat-menu

Answer 5

::ng-deep

lile CSS课程如下

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

它被应用于每个内部式垫子 - menu

角18

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