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

【问题标题】：How to style ng-bootstrap components in Angular 2如何在 Angular 2 中设置 ng-bootstrap 组件的样式
【发布时间】：2017-02-04 10:47:12
【问题描述】：

我正在尝试将样式应用于我的 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/。

谢谢！

【问题讨论】：

stackoverflow.com/questions/34542143/… 可能会有所帮助（阴影穿孔）
成功了，谢谢！但我担心这些穿孔风格会是全球性的。
“全球”是什么意思？如果您以 :host ... 开头选择器，那么它们只会应用于此组件及其子组件。
我的风格似乎不适用于该元素css [_nghost-epe-11] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .license-circle[_ngcontent-epe-11] { .... } .tooltip.in { opacity: 1; } .tooltip .tooltip-inner { padding: 0.5rem; ... }
您能否编辑您的问题并添加演示您尝试过的代码？

【解决方案1】：

对于 Angular 8.3 版本，推荐使用 ::ng-deep

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

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

我们需要记住的一件事是 ::ng-deep、/deep/ & >>> 在 Angular 9 中已被弃用。因此，在这一点上寻找其他长期解决方案将是一件好事.查看docs 了解更多信息。

【讨论】：

【解决方案2】：

正如评论中提到的，选择器应该以:host开头

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

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

【讨论】：