Css 引导程序4：popover颜色

如何修复bootstrap 4 popover上的箭头颜色

这是我的CSS：

.popover {
    background-color: #212121;
    color: $transparent_white;
} 

这是我的HTML：

<div class="popover bs-tether-element show bs-tether-element-attached-top bs-tether-element-attached-center bs-tether-target-attached-bottom bs-tether-target-attached-center" style="top: 0px; left: 0px; position: absolute; transform: translateX(243px) translateY(294px) translateZ(0px);">
    <div data-reactroot="" class="popover-inner">
        <div class="component-rate-popover popover-content">
        </div>
    </div>
</div>

试试这种方法

.popover.popover-bottom::after, 
.popover.bs-tether-element-attached-top::after{ border-bottom-color:#212121; }

如果要使用Sass（.SCSS），则可以使用以下方法：

.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
        border-bottom-color: #212121;
}

---

这几乎是开箱即用的，但我必须做一个小改动才能使它工作：.popover.popover-bottom:：after，.popover.bs-tether-element-attached-top:：after{border-bottom-color:#21212121；}也许这与我的pover被放在底部有关？我更新了我的问题，请注意，我解决了它，添加了我在上面提到的代码。请更新您的答案，以便我可以将其标记为正确：）我做到了，只要您的问题得到解决，这不是问题：）