javascriptcssangularlessangular-material

Custom Styling Background Color for Mat-Menu in Angular Material

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?

Solution

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

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