css - 如何自定义 react-popper 箭头

Question

如何设置与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

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