角度材质中垫菜单的自定义样式背景颜色

Question

I am trying to override some Material2 styling in my Angular 2 app and so far I'm not able to get it to work. Specifically, I want to override the background color for the md-menu. This is what my html looks like:

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

And this is what I've tried adding in my LESS/CSS:

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

So far this seems to have no effect. The default #fff background-color still shows up for the md-menu background.

As additional info, when I hover over and inspect element, I see the default mat-menu-content class as being styled with the white background, like this:

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

I've tried adding that class to my component CSS, and using it to override the background-color, also to no avail. If I "de-select" that color for that class in my browser console, the background color goes away (becomes transparent). But, as I say, adding that class and overriding the color in my CSS doesn't override the white color when I reload.

How can I accomplish this with CSS alone?

Answer 1

You can also use this:

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

demo

Answer 2

If I am not wrong, the following css should work for you:

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