CODEWITHSUNDEEP
cssangularangular-material
jrDeveloper
jrDeveloper

Reputation: 167

How to add CSS to Angular Materials component?

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:

enter image description here

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

Upvotes: 2

Views: 1699

Answers (2)

Uliana Pavelko
Uliana Pavelko

Reputation: 2952

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

Upvotes: 1

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

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.

Upvotes: 1

Related Questions