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

Question

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

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

但是由于 Angular 2 应用了样式范围，我无法直接在我的组件模板中设置 .tooltip class 的样式。

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

编辑：

我有一个附加到我的组件的 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

对于angular版本8.3，推荐::ng-deep

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

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

One thing that we need to remember is that ::ng-deep, /deep/ & >>> have been deprecated in angular 9. So, finding some other long term solution would be a good thing to do at this point. Check out the docs for more.

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

How to style ng-bootstrap components in Angular 2

ng-bootstrap

angular