CODEWITHSUNDEEP
cssangularsassangular-material2
Cacoon
Cacoon

Reputation: 2538

Set mat-menu style

Im having alot of trouble with this, and the apparent solutions aren't working or im doing something wrong (probably the latter).

I want to style my mat-menu and the mat-menu-item's, ive tried doing this:

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

But it doesnt work, my menu looks like this (nothing abornomal)

<mat-menu #infoMenu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Resume</span>
  </button>
  <button mat-menu-item>
    <mat-icon>voicemail</mat-icon>
    <span>Portfolio</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>References</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Contact</span>
  </button>
</mat-menu>

I have also tried /deep/ but I know that shouldn't work and in fact should be depreciated in Angular 4 but I did it to test, I am not sure how to style the elements at this point.

Upvotes: 26

Views: 83466

Answers (7)

Włodzimierz Woźniak
Włodzimierz Woźniak

Reputation: 3225

Angular 18

::ng-deep .mat-mdc-menu-panel {
  background-color: white !important;
}

Upvotes: 0

Monti
Monti

Reputation: 141

Since ::ng-deep is deprecated, this is how I customize mat-menu

<mat-menu class="user-menu" #menu="matMenu">
   <button mat-menu-item>Profile</button>
   <button mat-menu-item>Settings</button>
</mat-menu>

In the new version of Angular Material, I used the base class of mat-menu, which is mat-mdc-menu-panel

.mat-mdc-menu-panel.user-menu {
  background-color: red;
}

Upvotes: 1

Jack Daus
Jack Daus

Reputation: 88

Another solution which (1) allows us to keep our default ViewEncapsulation and (2) does not require the deprecated ::ng-deep

app.component.html

<mat-menu #infoMenu="matMenu" class="my-class">...

And then in your global styles sheet

styles.css

.mat-menu-panel.my-class {
  background-color: red;
}

This solution was provided in the Angular/Components git repository: https://github.com/angular/components/issues/16742

The original author of this solution provided a stackblitz here: https://stackblitz.com/edit/angular-y3jqzt

Upvotes: 6

Chameleon
Chameleon

Reputation: 149

I customized angular material element mat-menu by using ::ng-deep

<mat-menu #createPlan="matMenu" class="custom-menu">
    <button mat-menu-item [matMenuTriggerFor]="profilestypes">Client Profile</button>
          <button mat-menu-item>Supplier Profile</button>
    <button mat-menu-item>Advisor Profile</button>
</mat-menu>

while css class was as follows

::ng-deep .custom-menu{
  margin-top: 15px;
}

and it got applied to each and every internal class of mat-menu

Upvotes: 0

Md Rafee
Md Rafee

Reputation: 5540

Easier Way If you want to change your component only without affecting other components, you should add a class to the menu.

<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>

Then style your menu with ::ng-deep.

::ng-deep .customize {
  background: red;
}

voila!! your customization will not affect other components.

Another Way: you can add backdropClass to the menu.

 <mat-menu #infoMenu="matMenu" backdropClass="customize"></mat-menu>

Then add CSS style class with +* in your styles.css

.customize+* .mat-menu-panel {
  background: red;
}

This is also accomplished without affecting others, but adding css in styles.css may be a bit inconvenient.

Upvotes: 43

Thanigai Arasu
Thanigai Arasu

Reputation: 119

Define original background-color and mouseover color both in the CSS:

.mat-menu-item {
  color: blue !important;
}

button.mat-menu-item{
    background-color: white;
}

button.mat-menu-item:hover {
    background-color: blue;
    color: #fff !important;
}

Upvotes: 11

Z. Bagley
Z. Bagley

Reputation: 9270

app.component.ts

import { Component, ViewEncapsulation ... } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  constructor() { }
}

my.component.css

.mat-menu-content {
    background-color: 'red' !important;
}

I typically use this to style the height and overflow css, but the general idea should still stand for background-color. Please note that there may be other overlaying divs with background-colors, but you should be able to access them in this way by their .mat-menu-<item name> css and change children items in the same manner.

Upvotes: 20

Related Questions