How to overwrite angular 2 material styles?

Question

I have this select in angular material:

Its code :

Answer 1

::ng-deep works like a charm for me... for scss and sass file.

Answer 2

I do it this way whenever I have to remove scroll from mat-sidenav-container

   .mat-sidenav-container-classname ::ng-deep mat-sidenav-content {
      overflow: hidden;
    }

Answer 3

The top solutions of /deep/, >>> and ::ng-deep are being deprecated and should no longer be used.

The recommended method is now view encapsulation

---

Edit: Word of warning. I do not recommend using this method at all (as of Jan 2019) as setting ViewEncapsulation.None will result in any of that components css becoming global styles (it stops Angular from creating ng_xxx attributes for component scoped css). This will result in global style conflict, especially with lazy loaded module css.

Our solution to ViewEncapsulation was to override very specific css using highly specific css selectors in 1) global css or 2) creating separate style files for certain views / styles / elements, importing into every component required (e.g. styleUrls: [material-table-override.css, component.css]).

---

I used ViewEncapsulation.None to successfully override material table styles within a single component in Angular 6.

On your component:

import { ViewEncapsulation } from '@angular/core';
// ...
@Component({
    // ...
    encapsulation: ViewEncapsulation.None,
})

Here's a great article on the subject

Answer 4

I was facing the same issue with Angular Material, I inspected the select element, checked its classes and tried to overwrite the css rules for material css classes , even tried !important flag for style rules. But it was not working.

Moving all such rules from component to index.html worked for me.

.mat-select-value,
    .mat-option-text,
    .mat-standard-chip,
    .mat-input-element,
    .mat-menu-item {
         color: #666 !important;
         font-size: 13px !important;
     }
}

Answer 5

The correct way to change styles of overlay classes like mat-dialog-container is to use panelClass according to Customizing Angular Material component styles:

Add this to your global stylesheet after your theme setup

.myapp-no-padding-dialog .mat-dialog-container {
  padding: 0;
}

Use the following to open the dialog

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

Answer 6

you can use:

::ng-deep {
 .mat-dialog-container{
   padding: 0px 
 }
}