CODEWITHSUNDEEP
javascriptcssangularlessangular-material
Muirik
Muirik

Reputation: 6289

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?

Upvotes: 1

Views: 7692

Answers (3)

Alessandro Modica
Alessandro Modica

Reputation: 91

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

Upvotes: 0

Azim Saiyed
Azim Saiyed

Reputation: 572

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

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

Upvotes: 2

Vega
Vega

Reputation: 28701

You can also use this:

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

demo

Upvotes: 6

Related Questions