Comment désactiver l'encapsulation des vues dans un composant tiers en angular2/4 ?

Question

Je veux remplacer les styles d'un composant open source que j'utilise, mais le seul moyen que j'ai trouvé pour désactiver l'encapsulation des vues est le décorateur d'un composant. Bien sûr, l'utilisation d'un module tiers signifie que je ne peux pas modifier la source de ce module. Comment faire autrement ?

modifier

Je suis au courant de la suggestion des styles /deep/. Ce que je veux faire, c'est remplacer les styles de table dans un composant tiers par le style de bootstrap 4. Le composant personnalisé a une classe .table qui lui est appliquée, mais avec l'encapsulation de la vue, il n'est pas accessible par les classes de Bootstrap 4.

Je veux juste savoir s'il existe un moyen de désactiver complètement l'encapsulation de la vue sans avoir à forker le code et à ajouter la valeur de la propriété du décorateur du composant "encapsulation : ViewEncapsulation.None" pour mon propre usage.

Answer 1

Vous pouvez utiliser le sélecteur css /deep/ pour remplacer le style css des composants imbriqués. Par exemple, le composant utilise un composant tiers qui crée une liste déroulante avec la classe ".dropdown".

Le composant html :

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

et voici le css du composant qui surcharge la classe de la liste déroulante.

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