ReactJS中如何在内联样式中使用变量或--i:0自定义属性？

你的代码问题出在直接修改根元素的全局CSS变量，而且循环里写死了固定值，导致所有Card最终都继承了最后一次设置的变量值。要实现每个Card拥有独立的--i自定义属性，只需直接给每个元素的style属性绑定对应值即可，无需操作根元素。

修正后的代码 #

import './project.css';

const numbers = [-1, 0, 1];

const Project = () => {
  return (
    <div className="container">
      {numbers.map((num) => (
        <div key={num} className="card" style={{ '--i': num }}></div>
      ))}
    </div>
  );
};

export default Project;

关键说明 #

• 移除了冗余的<html>/<head>/<body>标签：React组件仅需返回需要渲染的页面内容片段，完整的HTML结构应放在项目的public/index.html中（常规React项目）。
• 直接在Card元素的style属性中定义--i变量：通过style={{ '--i': num }}，每个循环生成的Card都会拥有独立的--i值，和你提供的HTML示例效果完全一致。
• 无需操作根元素样式：你的需求是给每个元素单独设置变量，而非全局统一变量，所以不需要document.querySelector(':root')这部分代码。

内容的提问来源于stack exchange，提问作者Paarth Kadakia