L'attribut `style` attend un mappage des attributs de style aux valeurs

Question

Lors de la création d'un curseur d'image recto et verso à l'aide de React, j'ai rencontré cette erreur. Je ne sais pas si je dois l'importer mais malheureusement c'est un fichier externe. Tous les conseils et suggestions seraient grandement appréciés

<div class="scroller scroller-top">
                    <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points= "0 50 37 68 37 32 0 50" style="fill:rgb(24,24,62)"/><polygon points="100 50 64 32 64 68 100 50" style="fill:rgb(24 ,24,62)"/></svg>
</div>

Je m'attendais à voir l'icône SVG, mais à la place, une erreur a été générée comme décrit ci-dessus

Answer 1

Vous pouvez ajouter des fill attributs directement sur le polygone comme ceci :

<div className="scroller scroller-top">
  <svg
    className="scroller__thumb"
    xmlns="http://www.w3.org/2000/svg"
    width="100"
    height="100"
    viewBox="0 0 100 100"
  >
    <polygon points="0 50 37 68 37 32 0 50" fill="rgb(24,24,62)" />
    <polygon points="100 50 64 32 64 68 100 50" fill="rgb(24,24,62)" />
  </svg>
</div>

Bonus : class属性应为className si vous utilisez React.