CODEWITHSUNDEEP
cssangularsassangular-material
wrabarias
wrabarias

Reputation: 383

Prevent angular material css styles from propagating to other components

so I have an override to angular material style in my global scss style like this:

.mat-form-field-infix{
   padding: 0.5em 0 0.5em 0 !important;
}

then I want to apply a different padding to the same element in my component since I need a bit of more space to view more data; here is what I do in my component scss style:

:host ::ng-deep .mat-form-field-infix{
   padding: 0.2em 0 0.2em 0 !important;
}

but the last style gets propagated to all components once its load. so the question is how can I prevent this behavior?

Upvotes: 1

Views: 1613

Answers (1)

Clinton Curry
Clinton Curry

Reputation: 136

Note that ::ng-deep is destined to be deprecated: see Special selectors.

You can, however, follow a strategy like Yuriy describes: If you want extra padding for all descendants of my-roomy-component, you can target CSS from your global styles like

my-roomy-component .mat-form-field-infix {
  padding: 0.2em 0 0.2em 0 !important;
}

And, again as Yuriy suggests, add more specificity to the selector to help the padding take effect without the !important. Alternatively, the outer component can have its view encapsulation set to None so its styles become global, but scope with CSS selectors again.

Upvotes: 2

Related Questions