Angular 2 Material Customize MD Menu

Question

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

<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon>
<md-menu #menu="mdMenu" [overlapTrigger]="false">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

The predefined style settings work fine (for example, the menu setting does not overlap), but I would like to set the md menu to 100% width and run a little between the md-icon button, which expands the menu, which I cannot do with the predefined directives from Angular 2 material .

So far, I have found a solution with the / deep / css command, but I read that this command is no longer supported by major browsers.

What is a good way to customize Angular 2 component? How can I create my md menu so that it has 100% width and some space between the extension button?

To illustrate what I'm talking about: Draft menu

Answer 1

You can pass custom classes to menus.

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

You can then target this class to global styles.

For your needs, unfortunately, you need to know some information about where your menu overlay is located, and hard copy some repositioning

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

Plunger Demo

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

Answer 2

Angular ViewEncapsulation.Emulated - , , , - .. , css. , ng-deep . , ! https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

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

Answer 3

To create a matte menu without disabling encapsulation for this component, you must use 2 classes to increase specificity just like you already did or use! important. However, in order to make it work, you must put them in your global style for you to override the default styles.