如何将CSS添加到Angular Materials组件？

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

您是否尝试过打开具有所需特定高度的对话框？像：

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

强制自定义样式的另一种方法是自定义主题本身。您可以查看指南here。

Answer 2

您可以从scss / css覆盖材质样式。 但是由于视图封装，您需要使用 / deep / 选择器，这将允许您获取在呈现组件时添加的Material类。例如：

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