React-bootstrap Popover箭头横竖状态颜色反转问题及修复

成因 #

React-Bootstrap的Popover箭头是靠两个伪元素（::before和::after）的边框三角效果实现的。不同位置的箭头，依赖的边框方向不一样：

• 水平方向（左/右侧）的箭头，靠border-left/border-right的颜色来呈现；
• 垂直方向（上/下方）的箭头，靠border-top/border-bottom的颜色来呈现。

你写的CSS统一把border-top和border-bottom设为透明，不管箭头方向。这就导致垂直方向时，本该显示颜色的上下边框被藏起来，反而显示了左右边框的灰色，和箭头的原生实现逻辑冲突，结果就变成了"透明箭头+灰色背景"的反转效果。

修复方案 #

针对不同位置的Popover，分别设置对应的边框样式，只隐藏不需要的边框方向：

/* 处理水平方向（左/右侧）的箭头 */
.popover-start .popover-arrow::before,
.popover-start .popover-arrow::after,
.popover-end .popover-arrow::before,
.popover-end .popover-arrow::after {
  border-color: #212529 !important;
  opacity: 0.5;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* 处理垂直方向（上/下方）的箭头 */
.popover-top .popover-arrow::before,
.popover-top .popover-arrow::after,
.popover-bottom .popover-arrow::before,
.popover-bottom .popover-arrow::after {
  border-color: #212529 !important;
  opacity: 0.5;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

这样不管Popover在哪个方向，箭头都能正确显示半透明灰色的效果，不会再出现反转。

内容的提问来源于stack exchange，提问作者tok3rat0r