角度材料モーダルダイアログの周りの空白を取り除く

Question

角度材料モーダルダイアログで空白を取り除きたい。どのように私は白を見ることができないようにCSSをスタイルするのですか？これまでの私のCSS：

app-commission-me-dialog { 
    margin: 0px; 
    padding: 0px; 
} 

.mat-dialog-container { 
    margin: 0px; 
    padding: 0px; 
} 

Answer 1

があなたのスタイルで、デフォルトのスタイルを上書きするViewEncapsulationを使用してください。ダイアログが開きコンポーネントで

は、以下の変更を実行します。

import {ViewEncapsulation} from '@angular/core'; 

@Component({ 
    ....., 
    encapsulation: ViewEncapsulation.None 
}) 

とそのコンポーネントのCSSファイルで、次のクラスを追加します。ここでは

.mat-dialog-container { 
    padding: 0px !important; 
} 

はPlunker Demoへのリンクです。

Answer 2

私は選択した回答にコメントしましたが、完全な回答で明確にしたいと思います。コンポーネントにダイアログスタイルを追加し、ViewEncapsulationをNoneに設定すると、それらのスタイルはアプリケーション全体に全体的に影響し、将来のダイアログはパディングなしで開きます。

が代わりにダイアログのpanelClass性質を利用するために選ぶ：

component.ts

this.dialog.open(MyDialogComponent, { 
    panelClass: 'app-full-bleed-dialog', 
    data: ... 
}); 

グローバルスタイルシート

.app-full-bleed-dialog .mat-dialog-container { 
    padding: 0; 
} 

そのように、あなたはまだ上のカプセル化を維持することができますダイアログコンポーネントスタイル、および選択可能な必要に応じてapp-full-bleed-dialogクラスを再利用してください。

Materialコンポーネントのカスタマイズについては、check out this guideを参照してください。