Angular Bootstrap 弹出框自定义样式不起作用答案

【问题标题】：Angular Bootstrap popover custom styling doesn't worksAngular Bootstrap 弹出框自定义样式不起作用
【发布时间】：2019-06-29 13:55:16
【问题描述】：

我在子组件“子组件”之一中有引导弹出窗口。 Bootstrap 样式和弹出框在这里工作正常，但我想添加自定义样式。

我在“child-component.html”中配置popover如下

[attr.data-trigger]="'click'"
[attr.data-toggle]="'popover'"
[attr.data-placement]="'top'"
[attr.data-container]="'child-component'"

我在“child-component.scss”中将其设置为

.popover {
    border: 1px solid #007CCA !important;
  }

  .popover.right .arrow:after {
    border-right-color: blue;
  }

这没用，所以尝试了这个

:host >>> .popover { background-color: #009688; color: #fff; }

这也没用！！

HTML 结构，如果有帮助的话

<child-componet id="childComp">
<section>
    <div class="basicInfo">
        <div></div>
    </div>
    <div class="additinalComp">
        <div *ngIf="dataAvailable">
            <span>Total Amount</span><span>{{amount}}</span><i tabindex="{{i}}"
                        [attr.data-content]="info"
                        class="infoPopover"
                        [attr.data-trigger]="'click'"
                        [attr.data-toggle]="'popover'"
                        [attr.data-placement]="'top'"
                        [attr.data-container]="'child-component section'"></i>
        </div>
    </div>
</section>
</child-componet>

还有像引导我的风格。因为检查开发工具上不存在应用样式。这个带有内容的 .popover 类仅在单击后出现。我在角度使用 .scss 有什么办法可以实现吗？

【问题讨论】：

请提供您的 html 的重要部分，这应该有助于找到问题。如果默认样式覆盖了您的样式，还请检查 devTools。检查样式导入的顺序。
@The.Bear 添加了 HTML 结构，开发工具不显示任何应用的样式或引导程序覆盖。

标签： angular sass bootstrap-4 bootstrap-popover

【解决方案1】：

我用过

::ng 深度

而不是

或

/deep/ 或 >>>

作为

:host ::ng-deep .popoverr {
  border-right-color: blue;
}

这解决了我的问题。

非常感谢！

【讨论】：