Как отключить инкапсуляцию вида в стороннем компоненте в angular2/4?

Question

Я хочу переопределить стили для компонента с открытым исходным кодом, который я использую, но единственный способ найти инкапсуляцию вида - найти в декораторе компонента. Конечно, использование стороннего модуля означает, что я не могу редактировать его источник. Как еще это можно сделать?

редактировать

Я знаю о предложении / deep / styles. Я хочу переопределить стили таблиц в стороннем компоненте с помощью стиля из начальной загрузки 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%;
}