reactjs - React Popper'ın usePopper() hook'unu kullanarak bir ok oluştururken neyi kaçırıyorum?

Burada bulunan bir oku nasıl uygulayacağımı göstermek için Popper.js belgelerindeki örneği, usePopper kancasını kullanarak takip etmeye çalışıyorum:

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

Bunu bir kod kutusuna koyup ardından console.log ile styles.arrow'u yazdırmayı denedim ve şu çıktıyı verdiğini gördüm:

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

Yani bu kodu TypeScript ile yazılmış uygulamama ekliyorum, şöyle görünüyor:

 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,
        },
      },
    ],
  });

Ancak, burada styles.arrow'u console.log yaptığımda undefined olarak geliyor. Burada bir şeylerin yanlış olduğunu hissediyorum. Yanlış bir şey mi ilan ettim?

Cevap #1

Örnekle veya davranışla ilgili hiçbir sorun yok.

Bu yorumda belirtildiği gibi, Popper hiçbir stil sağlamaz. ve stil öğreticisni görmelisiniz

İlgili makaleler