Angular MaterialsコンポーネントにCSSを追加する方法は？

Question

私は角度2と角度のある素材を使ったウェブアプリを持っています。私は単純なモーダルを使用しています：

<h1 md-dialog-title *ngIf="data">{{data.title}}</h1> 
    <div md-dialog-content>What would you like to do?</div> 
    <div md-dialog-actions></div> 

しかし、私はアプリを実行すると、モーダルの高さは100％です。 Chromeデベロッパーツールで検査すると、Angular Materials/Angular 2がmd-dialog-contentを囲むいくつかのクラスを注入しているように見えます。ここではスナップショットです：

とにかく、誰もが、私は手動でのサイズに影響を与えることができるように動作をオーバーライドする方法任意の提案がありますか？ありがとう。

Answer 1

必要な高さでダイアログを開こうとしましたか？ like：

let dialogRef = dialog.open(UserProfileComponent, { 
    height: '400px', 
    width: '600px', 
}); 

カスタムスタイルを強制する別の方法は、テーマ自体をカスタマイズすることです。あなたはガイドhereを見ることができます。

Answer 2

あなたのscss/cssからマテリアルスタイリングを無効にすることができます。 ビューカプセル化のために、コンポーネントがレンダリングされるときに追加されたMaterialクラスを保持できるようにする/deep/セレクタを使用する必要があります。例：

/deep/ .mat-tab-group.mat-primary .mat-ink-bar{ 
    background-color: red; 
}