如何在angular2 / 4中禁用第三方组件中的视图封装？

Question

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.

Answer 1

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%;
}