javascript - Custom Styling Background Color for Mat-Menu in Angular Material - Stack Overflow

admin管理员组

文章数量:1306001

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 ponent 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 (bees 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 acplish this with CSS alone?

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 ponent 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 (bees 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 acplish this with CSS alone?

• javascript
• css
• angular
• less
• angular-material

Share Improve this question Follow edited Jan 15, 2020 at 10:24 Vega 28.7k2828 gold badges120120 silver badges145145 bronze badges asked Oct 4, 2017 at 21:55 MuirikMuirik 6,2891010 gold badges6767 silver badges132132 bronze badges 6

• They have changed the css class from md-menu to mat-menu. In fact in material 2 beta 12 they have deprecated all md prefixes and it is now mat for all. – zszep Commented Oct 6, 2017 at 18:11
• Right, but this is an Angular 2 app - as mentioned above. – Muirik Commented Oct 6, 2017 at 20:19
• As I can see from your tags within the html code, this is an Angular 2 app using Material. Execute "npm install @angular/material@latest" and you will get angular material 2 beta 12 installed. Had exactly the same problem as you. – zszep Commented Oct 6, 2017 at 20:34
• md-menu and mat-menu are material tags and not pure angular tags.Look inside your package.json and you will find a reference to @angular/material – zszep Commented Oct 6, 2017 at 20:35
• I get an error when trying to change that. Whereas md-menu works. So I will keep it that way until we upgrade to Angular 4. – Muirik Commented Oct 6, 2017 at 20:40

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6

You can also use this:

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

demo

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

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

I read this article after an anomaly that I notice during my developing on angular 17 and cdk material last version at 17 febrary 2024.

Me too I cannot customize the background of mat-menu, unique tag with this problem, while others all tags work fine with my thematization impl.

All solutions that I read here don't work, but I gathering all clue and little delta information about this.

After an investigation on chrome inspection and analizying I notice that html declare set a variable on white color called --mat-menu-container-color by prebuild theme that in the my case is indigo-pink.scss

  html {
...
--mat-menu-container-color: white; //indigo-ping.scss value for this variable
...
 }

and there is the rule

      .mat-mdc-menu-panel {
        ...
        background-color: var(--mat-menu-container-color);
        ...
      }

that set the white by variable of the prebuild theme.

If I try all solutions that I read here dont work nothing ..but... but if I reoverride all rulez into a ::ng-deep approach, all these styles and with a custom value, the background-color (on my example red just to test) work fine.

This is the test reoverride rule that I set on my specific ponent on specifico .scss style.

        ::ng-deep {
          .mat-mdc-menu-panel {
            ...
            background-color: var(--mat-menu-container-color);
            ...
           }
    
           html {
           ...
           --mat-menu-container-color: red; // this is my test 
           }
        }

Anyway there is a side effect that give a lot of hard critical thinking during to change a "simple" background color of a "simple" tag that show a menu (tag very crucial for a website).

I hate css and scss for this motivation, its a chaos ahah! So I hope that is usefull for others people.

for me this solution is a workaround, waiting a more straightforward approach to set these simple style by angular framework .

see u

本文标签： javascriptCustom Styling Background Color for MatMenu in Angular MaterialStack Overflow