当使用React Popper的usePopper()钩子生成箭头时，我漏掉了什么？

Question

我正在尝试按照Popper.js文档中此处找到的示例使用他们的usePopper挂钩实现箭头：

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

我尝试将此放入代码框中，然后console.log样式。箭头，看到它打印出以下内容：

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

所以我将下面的代码添加到我的 TypeScript 应用程序中，代码如下：

 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时，它返回undefined。我觉得这里有些问题。我是否声明了一些错误的内容？

- Andrew Bautista

---

我有完全相同的问题，你找到解决方法了吗？ - FooBar

Answer 1

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

如此评论所述，Popper不提供任何样式。 您必须参见样式教程。

- amirhe