CSS 设置 mat-menu 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46821027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set mat-menu style
提问by Cacoon
Im having alot of trouble with this, and the apparent solutions aren't working or im doing something wrong (probably the latter).
我在这方面遇到了很多麻烦，明显的解决方案不起作用或者我做错了什么（可能是后者）。
I want to style my mat-menuand the mat-menu-item's, ive tried doing this:
我想设计 mymat-menu和mat-menu-item's，我试过这样做：
::ng-deep .mat-menu{
background-color:red;
}
But it doesnt work, my menu looks like this (nothing 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>
I have also tried /deep/ but I know that shouldn't work and in fact should be depreciated in Angular 4 but I did it to test, I am not sure how to style the elements at this point.
我也试过 /deep/ 但我知道这不应该工作，实际上应该在 Angular 4 中折旧，但我这样做是为了测试，我不知道此时如何设置元素的样式。
回答by Z. Bagley
app.component.ts
app.component.ts
import { Component, ViewEncapsulation ... } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() { }
}
my.component.css
我的组件.css
.mat-menu-content {
background-color: 'red' !important;
}
I typically use this to style the height and overflow css, but the general idea should still stand for background-color. Please note that there may be other overlaying divs with background-colors, but you should be able to access them in this way by their .mat-menu-<item name>css and change children items in the same manner.
我通常使用它来设置高度和溢出 css 的样式，但总体思路仍应代表背景颜色。请注意，可能还有其他带有背景颜色的重叠 div，但您应该能够通过它们的.mat-menu-<item name>css以这种方式访问它们，并以相同的方式更改子项。
回答by Md. Rafee
Easier WayIf you want to change your component only without affecting other components, you should add a class to the menu.
更简单的方法如果您只想更改您的组件而不影响其他组件，您应该在菜单中添加一个类。
<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>
Then style your menu with ::ng-deep.
然后用 ::ng-deep 设计你的菜单。
::ng-deep .customize {
background: red;
}
voila!! your customization will not affect other components.
瞧！！您的自定义不会影响其他组件。
Another Way:you can add backdropClass to the menu.
另一种方式：您可以将backgroundClass 添加到菜单中。
<mat-menu #infoMenu="matMenu" backdropClass="customize"></mat-menu>
Then add CSS style class with +* in your styles.css
然后在你的styles.css中用+*添加CSS样式类
.customize+* .mat-menu-panel {
background: red;
}
This is also accomplished without affecting others, but adding css in styles.css may be a bit inconvenient.
这也是在不影响他人的情况下完成的，但是在styles.css中添加css可能有点不方便。
回答by Thanigai Arasu
Define original background-colorand mouseovercolor both in the CSS:
在 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;
}
