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

Question

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

编辑

我了解/深/风格建议。我想要做的是用引导程序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%; 
}