How to disable encapsulation of views in a third-party component in angular2 / 4?

Question

I want to override the styles for the open source component that I use, but the only way I can turn off display encapsulation is with a component decorator. Of course, using a third-party module means that I cannot edit its source. How else can this be done?

change

I know about the / deep / styles clause. What I want to do is redefine the table styles in a third-party component with the style from bootstrap 4. The custom component has a .table class applied to it, but with presentation encapsulation it is not available to boostrap 4 classes.

I just want to know if the the the the the the way to blanket can completely disable view encapsulation without having to deploy the code and add the value of the decorator property of the component "encapsulation: ViewEncapsulation.None" for my own use.

Answer 1

You can use the / deep / css selector to override the CSS style of nested components. For example, the component uses a third-party component that creates a drop-down list with the class .dropdown.

Html component:

<ss-multiselect-dropdown #multipleSelect [settings]="settings" [options]="options" [(ngModel)]="selectedOptions" (ngModelChange)="onSelectChange($event)"></ss-multiselect-dropdown> 

and here is the css of the component that overrides the drop down class.

 /deep/ .dropdown { display: inline-block; width: 100%; }