设置菜单样式

Question

我有很多麻烦,明显的解决方案不起作用或我做错了(可能是后者).

我想要设计我mat-menu和我的风格,我mat-menu-item试过这样做:

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

但它不起作用,我的菜单看起来像这样(没有任何abornomal)

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

我也试过/深/但我知道不应该工作,实际上应该在Angular 4中折旧,但我做了测试,我不知道如何在这一点上设置元素的样式.

Answer 1

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

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

然后用 ::ng-deep 设计你的菜单。

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

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

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

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

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

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

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

Answer 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 以这种方式访问​​它们并以相同的方式更改子项.

Answer 3

在 CSS 中定义 originalbackground-color和mouseovercolor：

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

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

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