How to add CSS to Angular Materials component?

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.

Abdel Raoof Olakara · Accepted Answer · 2017-03-16 04:42:33Z

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.

answered Mar 16, 2017 at 4:42

Abdel Raoof Olakara

19.4k11 gold badges92 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jrDeveloper Over a year ago

Thanks. This looks like the approach listed in the docs as well. I was opening for a more 'canonical' way, but this works.

Uliana Pavelko · Accepted Answer · 2017-11-21 15:29:18Z

1

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

answered Nov 21, 2017 at 15:29

Uliana Pavelko

2,9821 gold badge32 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to add CSS to Angular Materials component?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related