如何在Angular 2中设置ng-bootstrap组件的样式

Question

我正在尝试将样式应用于我的Angular 2应用程序中的ngbTooltip组件.我将指令应用为:

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

但是由于Angular 2应用了样式范围,我不能直接.tooltip在我的组件模板中设置类的样式.

如何为此特定组件提供自定义样式的工具提示？

编辑:

我有一个附加到我的组件的scss样式表.我的风格(简化)是:

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

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

但是我的渲染样式看起来像:

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

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

这让我相信工具提示样式是未封装的(而不仅仅是刺穿这个组件的子代.

注意:我试过:host >>> .tooltip但它不起作用,所以我最终使用了/deep/.

谢谢!

Answer 1

正如评论中所提到的,选择器应该从开头 :host

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

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