Angular 2 Material Customize md-menu

Question

I am new to Angular 2 Material and I am trying to customize the style of the md-menu component.

Answer 1

To style mat-menu without turning off encapsulation for this component you should use 2 classes to increase specificity as exactly as you already did or use !important. However, to make it work you should put them into your global stylesheet so that you will override the default styles.

Answer 2

You can pass custom classes to menus.

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="my-full-width-menu">

Then you can target that class with global styles.

For your needs, unfortunately, you'll need to know some information about where your menu overlay is positioned, and hardcode some repositioning

.mat-menu-panel.my-full-width-menu {
  max-width: none;
  width: 100vw;
  margin-left: -8px;
  margin-top: 24px;
}

Plunker Demo

The right way to do this is to create a custom overlay component with material's OverlayModule (current in the material package, but soon to be moved to the cdk).

Answer 3

In Angular, ViewEncapsulation.Emulated is the default option which means, it tries to narrow-down the scope of the affect by adding surrogate keys to the host-element etc. One option could be is to add below css. But mind, this ng-deep will also be deprecated soon. Have to wait to know the alternative! https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

::ng-deep .mat-menu-panel {
  max-width: none!important;
  min-width: 400px!important;
}