How to overwrite angular 2 material styles?

Question

I have this select in angular material:

Its code :

Answer 1

You can try adding this code.

.mat-dialog-container{
     padding: 0px !important;
}

If this does not work you can use

/deep/.className {
... your code goes here
}

Answer 2

Anyone looking for a cleaner approach in 2020, use the panelClass as suggested in the material mat-select documentation. Use the panelClass property

Answer 3

I think classes should work, but you may need to use /deep/ because of the view encapsulation.

Try this:

/deep/ md-select.your-class {
  background-color: blue;
}

You can also play with theming.

Answer 4

If you can solve your style issues with the material 2 scss theming that would be the "right" way hears is a link to there site. https://material.angular.io/guide/theming.

However I used !important on the styles I didn't want materials styles to overwrite.

Here is how I used it:

/*hack to get rid of a scrollbar*/
.cdk-focus-trap-content{
    overflow-x: hidden !important;
}

/*hack to get rid of a padding on the popup*/
.mat-dialog-container{
     padding: 0px !important;
 }

I had a situation where a horizontal scroll bar was showing up in the md-sidenav and I got rid of their default padding on the md-dialog.

Not the most elegant solution but I hope this helps.

This is another StackOverflow question that discusses what !important is.

What does !important in CSS mean?

Answer 5

you can use :root as well

:root {
    .mat-dialog-container{
        padding: 0px 
    }
}