Question

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

我在“ child-component.html”中按如下方式配置了弹出窗口

[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有什么办法可以实现呢？

Answer 1

我用过

:: ng-deep

代替

或

/ deep / 或>>>

为

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

这解决了我的问题。

非常感谢！

Angular Bootstrap popover自定义样式不起作用

1 个答案: