I want to override the styles for an open source component I'm using, but the only way I can find to disable view encapsulation is on a component's decorator. Of course using a third party module means I can't edit the source for it. How else could it be done?
edit
I know about the /deep/ styles suggestion. What I'm wanting to do is override the table styles in a third party component with the styling from bootstrap 4. The custom component has a .table class applied to it, but with view encapsulation, it is unreachable by the boostrap 4 classes.
I just want to know if theres a way to blanket disable view encapsulation altogether without having to fork the code and add the component decorator property value "encapsulation: ViewEncapsulation.None" for my own use.
You can use /deep/ css selector to override css style of nested components. For example, the component uses third party component that creates a drop down with ".dropdown" class.
The component html:
<ss-multiselect-dropdown #multipleSelect
[settings]="settings"
[options]="options"
[(ngModel)]="selectedOptions"
(ngModelChange)="onSelectChange($event)"></ss-multiselect-dropdown>
and here is css of the component that override the drop down class.
/deep/ .dropdown {
display: inline-block;
width: 100%;
}