Atribut `style` mengharapkan pemetaan daripada atribut gaya kepada nilai

Question

Semasa mencipta peluncur imej depan dan belakang menggunakan React, saya mengalami ralat ini. Saya tidak tahu sama ada saya perlu mengimportnya tetapi malangnya ia adalah fail luaran. Sebarang petua dan cadangan akan amat dihargai

<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>

Saya menjangkakan untuk melihat ikon SVG, tetapi sebaliknya ralat telah dilemparkan seperti yang diterangkan di atas

Answer 1

Anda boleh menambah fill atribut terus pada poligon seperti ini:

<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 jika anda menggunakan React.