reactjs - Hva går jeg glipp av når jeg bruker react poppers usePopper()-hook for å lage en pil?

Jeg prøver å følge eksemplet i dokumentasjonen til Popper.js om hvordan man implementerer en pil som finnes her ved å bruke deres usePopper-hook:

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

Jeg prøvde å legge dette i en kodeboks og deretter console.log stilene.arrow og ser at det skriver ut dette:

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

Så jeg legger til denne koden i appen min som er i TypeScript, det ser slik ut:

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

Men når jeg console.log styles.arrow her, kommer det tilbake som undefined. Jeg føler at det er noe galt her. Har jeg deklarert noe feil?

Svar #1

Det er ingenting galt med eksemplet eller oppførselen.

Som nevnt i denne kommentaren, gir ikke Popper noen stil, og du må se stilguiden.

Relaterte artikler