如何自定义 react-popper 箭头答案

【问题标题】：How to customize react-popper arrow如何自定义 react-popper 箭头
【发布时间】：2019-07-19 19:10:42
【问题描述】：

如何设置和popper一样的箭头样式

import React from "react";
import ReactDOM from "react-dom";
import { Manager, Reference, Popper } from "react-popper";

function App() {
  return (
    <Manager>
      <Reference>
        {({ ref }) => (
          <button type="button" ref={ref}>
            Reference element
          </button>
        )}
      </Reference>
      <Popper placement="right">
        {({ ref, style, placement, arrowProps }) => (
          <div
            ref={ref}
            style={style}
            className={`popover show bs-popover-${"right"}`}
          >
            <div className="popover-inner bg-primary">Popper element</div>
            <div
              className="arrow bg-primary"
              ref={arrowProps.ref}
              style={arrowProps.style}
            />
          </div>
        )}
      </Popper>
    </Manager>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

代码沙盒：https://codesandbox.io/s/bold-shape-lomrm

【问题讨论】：

标签： css reactjs bootstrap-4 react-popper

【解决方案1】：

首先，添加这个 CSS：

.bs-popover-auto[x-placement^=right] .arrow::after, .bs-popover-right .arrow::after {
  border-right-color: #007bff;
}

从.arrow 中去掉bg-primary 类并赋予这种风格：

style="top: -2px;"

预览

演示： https://codesandbox.io/s/eager-wu-h337q

【讨论】：