如何將CSS添加到Angular Materials組件？

Question

我有一個使用角度2和角度材質的Web應用程序。 我正在使用一個簡單的模式：

<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

您是否嘗試過打開所需高度的對話框？ 喜歡：

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

強制自定義樣式的另一種方法是自定義主題本身。 您可以在這里查看指南。

Answer 2

您可以從scss / css覆蓋材質樣式。 但是由於視圖封裝，您需要使用/ deep /選擇器，該選擇器將允許您保留呈現組件時添加的Material類。 例如：

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