Set Mat-Menü-Stil

Question

Ich habe eine Menge Probleme damit, und die scheinbaren Lösungen funktionieren nicht oder etwas falsch (wahrscheinlich letzteres).

Ich möchte meine mat-menu und die mat-menu-item ‚s, Stil, ive versucht, dies zu tun:

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

Aber es funktioniert nicht, sieht mein Menü wie dieses (nichts 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 habe auch versucht/deep/aber ich weiß, dass sollte nicht funktionieren und in der Tat sollte in Angular 4 abgeschrieben werden, aber ich habe es zu testen, ich bin mir nicht sicher, wie man die Elemente an diesem Punkt style.

Answer 1

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

ich dies in der Regel verwenden, um die Höhe und Überlauf css, aber die allgemeine Idee sollte noch zum ursprünglichen Stil stehen für Hintergrundfarbe. Bitte beachten Sie, dass es andere überlagernde divs mit Hintergrundfarben geben kann, aber Sie sollten in der Lage sein, auf diese Weise auf ihre .mat-menu-<item name> css zuzugreifen und untergeordnete Elemente auf die gleiche Weise zu ändern.

Answer 2

definieren Original background-color und mouseover Farbe sowohl im 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; 
}