Benutzerdefinierte Styling Hintergrundfarbe für Md-Menü in Angular 2 App

Question

Ich versuche, einige Material2 Styling in meiner Angular 2 App zu überschreiben und bisher bin ich nicht in der Lage, es zur Arbeit zu bekommen. Insbesondere möchte ich die Hintergrundfarbe für das MD-Menü überschreiben. Dies ist, was mein html wie folgt aussieht:

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="sub-drop-bg"> 
    <button md-menu-item routerLink="option-A" class="sub-drop-item">Option A</button> 
... 
</md-menu> 

Und das ist, was ich versucht habe, in meinem LESS/CSS hinzufügen:

md-menu.sub-drop-bg /deep/ { 
    background-color: #555 !important; 
} 

Bisher scheint keine Wirkung zu haben. Die Standard-Hintergrundfarbe #fff wird weiterhin für den Hintergrund des md-Menüs angezeigt.

Als zusätzliche Info, wenn ich über schweben und Element überprüfen, sehe ich die Standard-mat-menu-content Klasse wie mit dem weißen Hintergrund gestylt wird, wie folgt aus:

.mat-menu-content { 
    background: #fff; 
} 

Ich habe versucht, diese Klasse zu meiner Komponente Hinzufügen CSS, und damit die Hintergrundfarbe zu überschreiben, auch ohne Erfolg. Wenn ich die Farbe für diese Klasse in meiner Browser-Konsole "abwähle", verschwindet die Hintergrundfarbe (wird transparent). Aber wie gesagt, das Hinzufügen dieser Klasse und das Überschreiben der Farbe in meinem CSS überschreiben beim erneuten Laden nicht die weiße Farbe.

Wie kann ich dies mit CSS allein erreichen?

Answer 1

Wenn ich nicht falsch bin, wird die folgende CSS sollte für Sie arbeiten:

/deep/ .mat-menu-content { 
    background-color: #555 !important; 
} 

Answer 2

Sie können auch verwenden:

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

demo