0

I'm trying to change the MAT-TABLE as per my visual design. for that I'm overriding material's css like below. Now I can see my table as per VD. but I don't know is this correct way to override the material's css.

what will be the impact?

impact means - :host ::ng-deep does it affect any other css in my application?

shall i continue like this ? or is that any clean way to override the CSS. But by doing like this only the mat-table adopt the changes. By the way, my mat-table is reusable component.

.mat-paginator,
:host ::ng-deep.mat-form-field-infix {
    background-color: #EDF2F7;
}

:host ::ng-deep.mat-paginator .mat-paginator-container,
:host ::ng-deep.mat-paginator-navigation-previous,
:host ::ng-deep.mat-paginator-navigation-next,
:host ::ng-deep.mat-select-value,
:host ::ng-deep.mat-select-arrow {
    color: #626C7A !important;
}
Mr. Learner
  • 978
  • 2
  • 18
  • 48
  • 2
    /deep/, >>> and ::ng-deep are being deprecated and should no longer be used. BTW, here is a thread talking about how to override the material styling.https://stackoverflow.com/questions/43690291/how-to-overwrite-angular-2-material-styles – huan feng Aug 02 '21 at 06:54
  • 1
    I agree. `encapsulation: ViewEncapsulation.None` is the way to go but be sure to identify correctly your component in your CSS selectors. – Chaniro Aug 02 '21 at 15:32
  • 1
    There is another solution too. You can make use of CSS-Specificity. Basically, the most specific CSS-Selector wins. `.some-class` is less specific than `button.some-class`, therefore all properties from `button.some-class` override the same properties in `.some-class`. So if you make something like `.your-class .mat-paginator .mat-paginator-container` it should get overriden (in a global stylesheet, you can turn ViewEncapsulation back on then). There is a way to calculate the specificity, take a look at this post: https://stackoverflow.com/a/64157418/14332936 – Remy Aug 03 '21 at 14:45
  • @Remy in my case `encapsulation: ViewEncapsulation.Emulated` works fine. And Yes, I've also did the same as you said – Mr. Learner Aug 04 '21 at 02:51

0 Answers0