如何在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;
    }
}

Answer 2

对于有角度的版本8.3，建议:: ng-deep

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

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