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

Question

我想重写我正在使用的开源组件的样式，但是我能找到的禁用视图封装的唯一方法是在组件的装饰器上。当然，使用第三方模块意味着我不能为它编辑源代码。不然怎么做？

编辑

我知道这个/深度/风格的建议。我想做的是用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%;
}