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?