角2材質md-menuをカスタマイズする

Question

私はAngular 2 Materialを初めて使用しており、md-menuコンポーネントのスタイルをカスタマイズしようとしています。

<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> 

、事前に定義されたスタイル設定が（例えば、非重複するメニューを設定する）正常に動作が、私は100％の幅にMD-メニューを設定して、MD-アイコンボタンの間に小さなスペースを持っていると思いますそれはpredefined directives from Angular 2 Materialでできないメニューを展開します。

これまでのところ、/ deep/cssコマンドで解決策を見つけましたが、このコマンドは主要なブラウザではサポートされていません。

Angular 2 Materialコンポーネントをカスタマイズするにはどうすればよいですか？私はどのようにして100％の幅と拡大ボタンの間にいくらかのスペースがあるように、私のMDメニューをスタイルすることができますか？私が何を言っているか説明するために

： Draft of the menu

Answer 1

あなたがメニューにカスタムクラスを渡すことができます。

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

次に、そのクラスをグローバルスタイルでターゲティングできます。あなたのニーズに合わせて

、残念ながら、あなたはこれを行うには権利方法は、メニューのオーバーレイが配置されている場所についていくつかの情報を知っておく必要があり、そしていくつかの再配置

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

Plunker Demo

をハードコーディングますマテリアルのOverlayModuleを使ってカスタムオーバーレイコンポーネントを作成することです（マテリアルパッケージ内の現在のものですが、すぐにcdkに移動されます）。

Answer 2

Angularでは、ViewEncapsulation.Emulatedは、ホスト要素などに代理キーを追加することによって、影響の範囲を絞り込むことを意味するデフォルトのオプションです.1つのオプションは、以下を追加することです。しかし、心は、この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; 
}