使用 react popper 的 usePopper() 钩子生成箭头时我缺少什么？答案

【问题标题】：What am I missing when using react popper's usePopper() hook to generate an arrow?使用 react popper 的 usePopper() 钩子生成箭头时我缺少什么？
【发布时间】：2021-05-08 06:21:58
【问题描述】：

我正在尝试遵循 Popper.js 文档中的示例，了解如何使用他们的 usePopper 钩子实现此处找到的箭头：

https://popper.js.org/react-popper/v2/

我尝试将其放入代码框中，然后 console.log 样式.arrow 并看到它正在打印：

{position: "absolute", top: "", left: "0", transform: "translate3d(50px, 0px, 0)"}

所以我将此代码添加到我的打字稿中的应用程序中，它看起来像这样：

 const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [
      {
        name: 'arrow',
        options: {
          element: arrowElement,
        },
      },
    ],
  });

但是，当我在这里 console.log styles.arrow 时，它返回未定义。我感觉这里有问题。我是不是说错了？

【问题讨论】：

我也有同样的问题；你找到解决办法了吗？

标签： reactjs typescript popper.js react-popper

【解决方案1】：

示例或行为没有任何问题。

正如this comment 中提到的，Popper 不提供任何样式。你必须看到styling tutorial

【讨论】：