Html Question posted in
Some basic documentation can be found here.

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

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!

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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;
        }
      }
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search