防止角材料 css 样式传播到其他组件

Question

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?

Answer 1

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.