Angular 17 | Angular Material 17.3.1 Issue with styling Angular Material Menu component

Question

I'm currently working with Angular 17 and Angular Material 17.3.1, and I'm encountering an issue with styling the Menu component. Specifically, I'm trying to adjust the height of the menu items, but my attempts haven't been successful so far. Link -> https://material.angular.io/components/menu/examples#menu-overview

Here's my sample code:

account.component.html

  <button
    class="btn btn-default"
    [matMenuTriggerFor]="accountMenu"
    type="button"
  >
    <mat-icon>person</mat-icon>
  </button>
  <mat-menu #accountMenu="matMenu">
    <button mat-menu-item routerLink="/register" type="button" class="menu-btn">
      Login
    </button>
  </mat-menu>

account.component.scss

  mat-menu {
    .mat-mdc-menu-panel {
      .mat-mdc-menu-content {
        button {
          min-height: 24px !important;
        }
      }
    }
  }

I've tried to adjust the height of the menu items using the provided Scss code, but it doesn't seem to have any effect. Can anyone suggest what might be wrong with my approach or provide an alternative solution to style the menu items?

Thank you in advance!

Answer 1

You can use ::ng-deep directive

The ::ng-deep CSS selector is often used in an Angular Component’s CSS to override the styles of a third-party component or a child component’s styles

Something just like this:

::ng-deep mat-menu > .mat-mdc-menu-panel > .mat-mdc-menu-content > button {
    min-height: 24px !important;
}

Answer 2

You can set the encapsulation strategy using ViewEncapsulation.None.

Beware:

The styles of components are added to the of the document, making them available throughout the application, so are completely global and affect any matching elements within the document.

To avoid that, you can include it in a component’css selector to define the css style:

Exemple :

// component

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})....

// styles

my-app {
  mat-menu {
    .mat-mdc-menu-panel {
      .mat-mdc-menu-content {
        button {
          min-height: 24px;
        }
      }
    }
  }
}

Answer 3

Use ::ng-deep along with :host or you can add your css in style.scss so that you dont need to use ::ng-deep.

:host{
  ::ng-deep {
    mat-menu {
    .mat-mdc-menu-panel {
      .mat-mdc-menu-content {
        button {
          min-height: 24px;
        }
      }
    }
  }
  }
}