0
284
ViewsHow to overwrite angular 2 material styles?
I have this select in angular material:
Its code :
<md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount">
<md-option [value]="null" [disabled]="true">
Descuentos
</md-option>
<md-option *ngFor="let option of discounts" [value]="option">
{{ option }}
</md-option>
<md-option [value]="null" [disabled]="true">
Convenios
</md-option>
<md-option *ngFor="let option of agreements" [value]="option">
{{ option }}
</md-option>
</md-select>
And I would like to have this styles in it:
I tried to put some classes over md-select and md-option, but not worked. I would like to have maybe just an example of how to put the background color or the border and that would give me an idea.
Thank you in advance
3 answers
Answer question0
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,
})
0
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.