如何自定义反应弹出箭头

Question

如何设置箭头样式与弹出器相同

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

Answer 1

首先，添加以下CSS：

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

从bg-primary中去掉.arrow类，并给出如下样式：

style="top: -2px;"

预览

​

​

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