風格ngBootstrap工具提示

Question

我有一個簡單的ngBootstrap工具提示，我正在嘗試風格的角度4組件。根據其他SO問題，這應該工作：

.tooltip-inner { 
    background-color: #00acd6 !important; 
    /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/ 
    color: #fff; 
} 

但它沒有效果。我確認了工具提示 - 內部類在工具提示中使用，但它沒有被應用

Answer 1

This Plunker顯示瞭如何設置ng-bootstrap工具提示的樣式。關鍵是要使用/deep/或::ng-deep **的風格強行進入子組件：

::ng-deep .tooltip-inner { 
    background-color: #00acd6; 
    color: #fff; 
} 

默認情況下，角採用仿真view encapsulation這意味着除非你告訴他們樣式不會從父傳播到子組件（例如使用::ng-deep）。

** /deep/是deprecated in Angular 4.3.0和::ng-deep現在是優選的，儘管根據這個鏈接也將在未來

棄用