Angular 角度引导popover自定义样式不起作用

我在其中一个子组件child-component中有bootstrap popover。 引导样式和popover在这里运行良好，但我想添加自定义样式

我在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结构，开发工具不会显示任何应用的样式或引导覆盖。

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