Jak stylizować komponenty ng-bootstrap w Angular 2

Question

Próbuję zastosować style do komponentu ngbTooltip w mojej aplikacji Angular 2. I stosuje się dyrektywę, jak:

<div [ngbTooltip]="tooltipText"> 
    Element text 
</div> 

Ale ponieważ kątowa 2 stosuje styl scopingu, nie mogę bezpośrednio styl klasę w szablonie mojego komponentu .tooltip.

Jak mogę podać etykietki narzędzi dla tego konkretnego składnika w niestandardowej stylizacji?

EDIT:

Mam stylów SCSS, który jest dołączony do mojego składnika. My style (uproszczony) są:

.license-circle { 
    width: 10px; 
    ... other styles 
} 

/deep/ .tooltip { 
    &.in { 
     opacity: 1; 
    } 
} 

Ale moi świadczone style wyglądać następująco:

<style> 
.license-circle[_ngcontent-uvi-11] { 
    width: 10px; } 

.tooltip.in { 
    opacity: 1; } 
</style> 

co sprawia mi wierzyć style podpowiedzi są jest un-obudowane (zamiast po prostu przebijania tego składnika dzieci

. Uwaga: próbowałem :host >>> .tooltip i to nie działa, więc skończyło się używając /deep/

.

Dzięki!

Answer 1

Jak wspomniano w komentarzu, selektory powinien zacząć :host

:host .license-circle { 
    width: 10px; 
    ... other styles 
} 

:host /deep/ .tooltip { 
    &.in { 
     opacity: 1; 
    } 
}