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

Question

I have a web app using angular 2 and angular materials. I am using a simple modal:

<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>

But when I run the app the modal's height is 100%. When I inspect with Chrome dev tools, it looks like Angular Materials/Angular 2 is injecting some classes that wrap around the md-dialog-content. Here is a snapshot:

Anyways, does anyone have any suggestion how to override the behavior so I can manually affect the size? Thanks.

Answer 1

Have you tried opening your dialog with specific height that you need? like:

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

Another way to force custom styles is to customize the theme itself. you can have a look at the guide here .

Answer 2

You can override material styling from your scss/css. But due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered. For example:

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