如何为React中map遍历生成的每个元素添加自定义CSS样式

• 方案1：直接绑定样式对象到子元素
  如果你需要所有字母复用基础样式，直接给map生成的div加上style={customStyle}即可。如果需要每个字母单独生成随机的top、left值，可以在map遍历的回调中动态合并样式。

修改后的完整代码如下：

import React from "react";

// Splitting Letters
const SplitText = React.memo(({ str }) => {
  // 基础公共样式
  const baseStyle = {
    position: "absolute",
    zIndex: "initial",
    color: "green"
  };

  return (
    {/* 父元素加相对定位，子元素绝对定位才会相对于父容器偏移，避免直接对齐整个视口 */}
    <div style={{position: "relative"}}>
      {str.split("").map((item, index) => {
        // 每个字母单独生成随机偏移，可根据需求调整随机数值范围
        const randomTop = Math.floor(Math.random() * 20) + 'px';
        const randomLeft = Math.floor(Math.random() * 20) + 'px';
        // 合并基础样式和当前项专属样式
        const finalStyle = {
          ...baseStyle,
          top: randomTop,
          left: randomLeft
        }
        return (
          <div key={index} style={finalStyle}>
            {item}
          </div>
        );
      })}
    </div>
  );
});

export default SplitText;

• 方案2：通过自定义CSS变量实现
  如果你需要用原生CSS自定义属性控制样式，可以在style中传入CSS变量，后续直接在CSS文件中修改规则即可：

<div 
  key={index} 
  style={{
    '--random-top': Math.floor(Math.random() * 20) + 'px',
    '--random-left': Math.floor(Math.random() * 20) + 'px'
  }} 
  className="split-text-item"
>
  {item}
</div>

对应的CSS规则：

.split-text-item {
  position: absolute;
  z-index: initial;
  color: green;
  top: var(--random-top);
  left: var(--random-left);
}

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