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

我有一個web應用程序使用角2和角材料。我正在使用一個簡單的模式：如何將CSS添加到Angular Materials組件？

<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的類。這裏是一個快照：

不管怎麼說，沒有任何人有任何建議如何重寫的行爲，所以我可以手動影響的大小？謝謝。

你有沒有試過打開你需要的特定高度的對話框？如：

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

另一種強制自定義樣式的方法是自定義主題本身。你可以看看指南here。

2017-03-16 04:42:33

謝謝。這看起來也是文檔中列出的方法。我打開了一個更「規範」的方式，但這是有效的。 – jrDeveloper

您可以覆蓋scss/css的材質樣式。但是由於視圖封裝，您需要使用/deep/選擇器，可以讓您獲取組件渲染時添加的Material類。例如：

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

2017-11-21 15:29:18

回答