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

Question

我想覆盖我正在使用的开源组件的样式,但我能找到禁用视图封装的唯一方法是在组件的装饰器上.当然使用第三方模块意味着我无法编辑它的来源.怎么可能呢？

编辑

我知道/ deep/styles的建议.我想要做的是使用bootstrap 4中的样式覆盖第三方组件中的表样式.自定义组件应用了一个.table类,但是通过视图封装,boostrap 4类无法访问它.

我只是想知道是否有一种方法来完全禁用视图封装,而不必分叉代码并添加组件装饰器属性值"encapsulation:ViewEncapsulation.None"供我自己使用.

Answer 1

您可以使用/ deep/css选择器覆盖嵌套组件的css样式.例如,组件使用第三方组件创建带有".dropdown"类的下拉列表.

组件html:

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

这是覆盖下拉类的组件的CSS.

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