'How to convert these inline style in html into react?

Hi Inside the html people use these kind of styles to animate. I am actually following the pen from alphadex Link.

I never see this kind of writing in HTML before

<div class="lines">
    <div class="line" style="--i: 1;"></div>
    <div class="line" style="--i: 2;"></div>
    <div class="line" style="--i: 3;"></div>
    <div class="line" style="--i: 4;"></div>
  </div>

I am trying to change it into the react component. I can change the classname but i don't know how to convert the style?

Here is the react component

<div className="lines">
    <div className="line"></div>
    <div className="line"></div>
    <div className="line"></div>
    <div className="line"></div>
</div>
htmlcssreactjssass


Solution 1:[1]

As far as I know you can do inline styling in React like this:

<div className="lines">
   <div className="line" style={{--i: 1}}></div>
   <div className="line" style={{--i: 2}}></div>
   <div className="line" style={{--i: 3}}></div>
   <div className="line" style={{--i: 4}}></div>
</div>

Source: https://www.w3schools.com/react/react_css.asp

Edit: Maybe you have to try {{--i: "1"}} instead.

Solution 2:[2]

wrap them as classes

.i-1 {
    --i: 1;
}
.i-2 {
    --i: 2;
}
 ....

<div className="lines">
    <div className="line i-1"></div>
    <div className="line i-2"></div>
    <div className="line i-3"></div>
    <div className="line i-4"></div>
</div>

Solution 3:[3]

You need to add {{}} to your style. And convert css properties to camelcase.Here is example:

<div
            style={{
              width: '100%',
              backgroundColor: '#f1f1f1',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            test
          </div>

Solution 4:[4]

You could convert html inline style to react inline style like:

<div className="line" style={{"--i": 1}}></div>
<div className="line" style={{"--i": 2}}></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 IamSilviu
Solution 3 Khôi Hu?nh
Solution 4 hk-shrz

Related Questions