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

Question

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

编辑

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

我只想知道是否有一种方法可以完全禁用视图封装，而无需分叉代码并添加组件装饰器属性值“封装：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%;
}