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

Question

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

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

我试着把它放在一个代码框中，然后 console.log 的 styles.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 时，它会返回未定义。我感觉这里有什么问题。我是不是宣布错了？

标签： reactjstypescriptpopper.jsreact-popper

Answer 1

这个例子或行为没有错。

如本评论所述，Popper 不提供任何样式。你必须看看造型教程