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;
}
Improve this question
4
  • 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.stackoverflow.com/questions/43690291/… Commented Aug 2, 2021 at 6:54
  • 1
    I agree. encapsulation: ViewEncapsulation.None is the way to go but be sure to identify correctly your component in your CSS selectors. Commented Aug 2, 2021 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: stackoverflow.com/a/64157418/14332936 Commented Aug 3, 2021 at 14:45
  • @Remy in my case encapsulation: ViewEncapsulation.Emulated works fine. And Yes, I've also did the same as you said Commented Aug 4, 2021 at 2:51
Related questions
8
How to override material CSS styles?
8
Override padding for mat tree
1
Angular mat-table
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.