マットメニューのスタイルを設定する

Question

Imはこれに問題があり、見た目の解決策が機能していないか、何か間違ったことをしています（おそらく後者です）。私は私のmat-menuとmat-menu-item年代のスタイルを設定したい

は、IVEはこれをやってみました：

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

しかし、それは仕事をdoesntの、私のメニューは、この（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私はそれがうまくいかないことは知っていますが、Angular 4では減価償却されるべきですが、私はそれを試しました。この時点でどのように要素をスタイルするかはわかりません。

Answer 1

app.component.ts私は通常、まだすべき高さとオーバーフローCSSのスタイルを、これを使用しますが、一般的な考え方

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

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

export class AppComponent { 
    constructor() { } 
} 

my.component.css

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

背景色を表す。背景色を持つ他のオーバーレイするdivがあるかもしれませんが、あなたは.mat-menu-<item name> cssでこのようにアクセスして、同じ方法で子供のアイテムを変更することができるはずです。

Answer 2

は、両方のCSSで元background-colorとmouseover色を定義します。

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

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

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