The question has been raised previously, but unfortunately, it was left unanswered in this thread. The variables play a crucial role in this piece of code as they are intended to be utilized in various CSS functions for animating them with hover effects. Here is the equivalent HTML:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="card" style="--i:-1" ></div>
<div class="card" style="--i:0"></div>
<div class="card" style="--i:1"></div>
</div>
</body>
</html>
export default Project
I aim to achieve the same functionality within a React inline style JSX/JS file. Thus far, my attempt looks like this:
import './project.css';
const numbers = [-1, 0, 1]
var r = document.querySelector(':root');
const Project = () => {
return(
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div className="container">
{numbers.map((num) => (<div key={num} className="card" {...r.style.setProperty('--i', -1)}></div>))}
</div>
</body>
</html>
)
}
export default Project
However, this approach unfortunately only takes the final value from the list (which is 1) and applies it across all functions in the CSS file.