Cách tạo kiểu ng-bootstrap trong Angular 2

Question

Tôi đang cố áp dụng kiểu dáng cho thành phần ngbTooltip trong ứng dụng Angular 2 của mình. Tôi áp dụng các chỉ thị như:

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

Nhưng kể từ góc 2 áp dụng phong cách Phạm vi, tôi không thể trực tiếp tạo kiểu cho lớp .tooltip trong mẫu thành phần của tôi.

Tôi làm cách nào để cung cấp chú giải công cụ cho thành phần cụ thể này kiểu tùy chỉnh?

EDIT:

Tôi có biểu định kiểu scss được đính kèm với thành phần của tôi. phong cách của tôi (đơn giản hóa) là:

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

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

Nhưng sau đó phong cách render của tôi trông giống như:

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

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

Mà làm cho tôi tin rằng phong cách tooltip đang được un-đóng gói (thay vì chỉ xuyên phần này của

Lưu ý: Tôi đã thử :host >>> .tooltip và không hoạt động, vì vậy tôi đã sử dụng /deep/.

Cảm ơn!

Answer 1

Như đề cập trong các bình luận, các bộ chọn nên bắt đầu bằng :host

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

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