reactとcssのユーザー関連変数

叶えたい
cssにおけるユーザ関連変数(style=“--main-color:black;”)同じ顔のコードを順番に変更する必要があります.

実装するロード

実装するコード

-java script

<div class="loader">
	<span  style="--i:1" ></span>
	<span  style="--i:2" ></span>
	<span  style="--i:3" ></sapn>
</div>

-css

	span {
      transform: rotate( 18deg * var(i) );
    }

質問する
reactでは、htmlコードのスタイルはobjectでなければなりません。のオブジェクトの属性がcssの属性でなければならないため、reactでcssユーザ関連変数を使用することは困難になる.

無効コード

-react

	<span style={"--i:1"}> </span>

ソリューション:scssを使用したfor文
cssを用いたユーザ相関変数は,spanタグのスタイルをspanタグのサブ要素としての順序で徐々に変化させるためである.
そこでscssのfor文を用いて解決した.
-scss

	@for $i from 1 through 20 {
    span:nth-child(#{$i}){
      transform: rotate( 18deg * $i );
      }