这个问题以前被问过，但在text中从未得到完全回答。变量可能是这段代码中最重要的部分，因为我希望能够在多个CSS函数中使用它们，以使它们具有悬停效果。我有一个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字符串
我希望我的代码能够在React内联风格的JSX/JS文件中做同样的事情。到目前为止我只知道
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型
然而，不幸的是，这只使用列表中的最后一个值（1），并将此值用于CSS文件中的所有函数。
2条答案
按热度按时间e7arh2l61#
测试这个：
字符串
blmhpbnm2#
根据您发布的链接，我认为您试图实现的是在
styleprop 中为JSX元素设置CSS变量。你可以这样做：
字符串
我创建了一个Code Sandbox，它实际上显示了这一点，其中
--i的值来自某个任意长度的数组。然后，--i值用作背景色的一部分，并转换div的CSS props。下面的屏幕截图显示了20个数组的结果UI。注意：这个例子使用了Material UI，所以你不能从代码沙盒中找到
copy/paste。如果要重用代码，必须将sxprop 更改为style。希望这对你有帮助！
x1c 0d1x的数据