調整箭頭 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);