Comment obtenir la largeur d'un élément en px dans les composants stylisés ?

Question

Comme l'élément peut varier sa largeur en fonction de son contenu, je ne sais pas comment obtenir sa largeur en px.

Voici la structure de base, simplifiée :

// React component 

export const Navbar = ({ month }) => (
  <NavbarStyled>
    <div>
      <span>{month}</span>  //month is what varies in width
    </div>
  </NavbarStyled>
)

// NavbarStyled.js

export const NavbarStyled = styled.nav`
  ...

  span:after{
    ...  

    animation: show 1s ease forwards;
  }

  @keyframes show{
    100%{
      transform: translateX(the_element's_width_in_px);
    }
  }
`

J'ai essayé beaucoup de choses sans résultat.

Merci !

Answer 1

Vous pouvez obtenir la largeur en utilisant la fonction Fonction getBoundingClientRect() qui renvoie un objet contenant les attributs de l'élément. Avec les composants stylisés, vous devrez référencer l'élément à l'aide de l'attribut useRef crochet ou une autre méthode de référencement afin d'appeler getBoundingClientRect().

referencedElement.getBoundingClientRect()
// Return the width by calling referencedElement.getBoundingClientRect().width