设置垫菜单样式

我有这个很多麻烦，并且显而易见的解决方案不工作或即时做错事（可能是后者）。设置垫菜单样式

我想要的风格我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中折旧，但我做了测试，我不确定如何在这一点上设计元素。

来源

2017-10-19 Cacoon

'.MAT菜单 - panel'可能有帮助，以及使用'ViewEncapsulation.None' –

面板呼叫可悲的是没有做任何事情，而且我不知道我会在哪里设置视图封装？ D： – Cacoon

我会继续为ya编写一个更详细的答案 –

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

来源

2017-10-19 00:23:01

非常感谢！我只是想知道如何编辑淡入淡出颜色，它从'默认'灰色开始，然后淡入我设置的自定义颜色中，就像你展示的那样，是只是试验和错误？我不问，因为我试图暗示你错了只是想知道你是否知道，谢谢你的这个辉煌的解决方案！ – Cacoon

更新：它的菜单面板，所以非常感谢所有的帮助！ – Cacoon

更新2：我真的需要再次表示感谢，这个修复允许我最终轻松有效地自定义Material 2中的所有内容！ <3 – Cacoon

定义原background-color和mouseover颜色无论是在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; 
}

来源

2018-02-26 12:52:06

设置垫菜单样式

回答

相关问题