React中如何为HTML标签的style属性设置CSS变量--i的值

在React里设置像--i这类CSS自定义变量，核心是利用React的style属性对象语法，用字符串作为变量名的键即可——因为CSS变量包含破折号，无法用驼峰命名，必须用字符串键来定义。

基础写法对应 #

普通HTML的写法：

<span style="--i:3;" className="this">内容</span>

对应React的JSX写法：

<span style={{ "--i": 3 }} className="this">内容</span>

这里的双大括号是JSX语法：外层大括号表示嵌入JS表达式，内层大括号是style的键值对对象，"--i"是CSS变量的名称，值可以是数字或字符串（需要带单位时用字符串）。

批量元素的动画延迟场景 #

如果是循环渲染多个元素，需要给每个元素设置递增的--i来实现依次动画的效果，示例代码如下：

import React from 'react';

const AnimatedItems = () => {
  const list = ['元素1', '元素2', '元素3', '元素4'];
  
  return (
    <div className="item-container">
      {list.map((item, idx) => (
        <span
          key={idx}
          style={{ "--i": idx + 1 }} // 从1开始，避免第一个元素延迟为0
          className="animated-item"
        >
          {item}
        </span>
      ))}
    </div>
  );
};

export default AnimatedItems;

对应的CSS代码和普通HTML场景完全一致：

.animated-item {
  animation: slideIn 0.4s forwards;
  animation-delay: calc(0.1s * var(--i));
  opacity: 0;
  transform: translateY(20px);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

注意事项 #

• 如果CSS变量需要带单位（比如--delay: 0.3s），在React的style对象里要把值写成字符串：style={{ "--delay": "0.3s" }}
• 如果变量是用于calc()计算的数字，直接写数字值即可，CSS会自动识别为数值类型

内容的提问来源于stack exchange，提问作者Bipin Bhandari