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

问题描述

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

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

我试着把它放在一个代码框中，然后 console.log the 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 时，它返回未定义。我感觉这里有什么地方不对劲。我声明错了吗？

解决方法

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

如this comment中所述，Popper 不提供任何样式。 并且您必须看到 styling tutorial