调整箭头 position 以匹配参考元素的中间

Question

我有两个元素，一个参考元素，由一个黑色的圆形按钮表示，一个更宽的组件，类似于一个带有指针的弹出框。 与互联网上的大多数弹出窗口不同，我决定将 go 与相对定位，因为我希望它继续占据空间。

问题是，通过使用react-popper ，它似乎无法很好地处理定位。 如果您查看下面的沙盒示例，箭头并没有指向圆形按钮的中间。

组件代码，没什么特别的，只是为了说明我的大问题。 这是按钮，非常基本。

import { forwardRef } from "react";

export const RoundedBtn = forwardRef(({ children }, ref) => {
  return (
    <button className="btn" ref={ref}>
      {children}
    </button>
  );
});

和弹出框

import { forwardRef } from "react";

export const Popover = forwardRef(
  ({ title, footer, popoverProps, children }, ref) => {
    const { popperStyles, arrowStyles } = popoverProps;

    return (
      <div className="popover" ref={ref}>
        {title && <header>{title}</header>}
        {children}
        {footer && <footer>{footer}</footer>}
        <span data-popper-arrow style={arrowStyles} className="popover-arrow" />
      </div>
    );
  }
);

两个组件中的转发引用，在 Popover 中，我使用 popper styles 将其应用于箭头（我还没有对 Popover 容器这样做，因为它应用position: absolute它，我不想要它）。

在 App.js 中，再次简单：

export default function App() {
  const [refEl, setRefEl] = useState(null);
  const [popOverRef, setPopoverRef] = useState(null);

  const {
    styles: { popper, arrow }
  } = usePopper(refEl, popOverRef, {
    placement: "top"
  });

  const popoverProps = {
    popperStyles: popper,
    arrowStyles: arrow
  };

  return (
    <div className="app example-1">
      <RoundedBtn ref={setRefEl}>+</RoundedBtn>
      <Popover
        popoverProps={popoverProps}
        ref={setPopoverRef}
        title={title}
        footer={footer}
      >
        {content}
      </Popover>
    </div>
  );
}

只需使用usePopper钩子并设置其所需的参考。

但是，请现场观看，因为它没有正确对齐。 https://codesandbox.io/s/frosty-tess-jtz61e

你能告诉我要采取什么步骤来解决这个问题吗？ 我们用来移动 ref 和 popper 元素的技术无关紧要，我们可以使用align-items: center （奇怪地似乎与箭头配合得很好），或者align-items: flex-end ，箭头应该仍然指向引用元素，或者非常近似。

请帮忙，我将非常感激，它让我发疯了。

Answer 1

为第二个弹出窗口传递此 CSS 属性

transform: translate(8px, 0px);