How to add String variable or a --i:0 property on inline style ReactJS?-CodePudding

<li style="--i: 0">
        <a href=""><ion-icon name="home-outline"></ion-icon></a>
      </li>
      <li style="--i: 1">
        <a href=""><ion-icon name="person-outline"></ion-icon></a>
      </li>
      <li style="--i: 2">
        <a href=""><ion-icon name="settings-outline"></ion-icon></a>
      </li>
      <li style="--i: 3">
        <a href=""><ion-icon name="mail-outline"></ion-icon></a>
      </li>
      <li style="--i: 4">
        <a href=""><ion-icon name="key-outline"></ion-icon></a>
      </li>
      <li style="--i: 5">
        <a href=""><ion-icon name="videocam-outline"></ion-icon></a>
      </li>
      <li style="--i: 6">
        <a href=""><ion-icon name="game-controller-outline"></ion-icon></a>
      </li>
      <li style="--i: 7">
        <a href=""><ion-icon name="camera-outline"></ion-icon></a>
      </li>

This is my HTML file with style="--i:0" to --i:7 property

  <li style={--i: 0}>
          <i className="fa fa-plus" aria-hidden="true"></i>
        </li>

This is the code from ReacJS giving a --i:0 to inline style. And getting an error of "Style prop value must be an object". Can someone help me to apply what I did on the HTML file example on React inline style?

CodePudding user response：

In react to write styles directly, you have to do this => <li style={{ ...properties }}></li>

I don't know if u can access custom variables from react like that, what u can do is this.

<li style={`--i=${YOUR_VALUE}`}></li>

I hope I have been able to help you

CodePudding user response：

To achieve transform: rotate(calc(360deg / 8 * var(--i))) in style, try

{let s = rotate(calc(360deg / 8 * var(--i))) // assume i has some value}
<li style={{transform: s }}></li>