如何获取地图中的每个元素并更改其 CSS？

Question

我想遍历并为名为“item”的地图中的每个元素分配一个自定义 CSS 属性，但我不知道如何做到这一点。 下面是我的代码：

import React from "react";

// Splitting Letters
const SplitText = React.memo(({ str }) => {
  

  const customStyle = {
    position: "absolute",
    /*top: some random top value,*/
    /*left: some random left value,*/
    zIndex: "initial",
    color: "green"
  };

  return (
    <div>
      {str.split("").map((item, index) => {

        
        return (
          <div key={index}>
            {item}
          </div>
        );
      })}
    </div>
  );
});

export default SplitText;

我的“项目”有一组字母，我想抓住每个字母并以某种方式将 customStyle CSS 属性映射到它。

任何建议都会有很大帮助。

Answer 1

用您的 customStyle 返回它们

  const customStyle = [{
    position: "absolute",
    /*top: some random top value,*/
    /*left: some random left value,*/
    zIndex: "initial",
    color: "green"
  },{
    position: "relative",
    /*top: some random top value,*/
    /*left: some random left value,*/
    zIndex: "1",
    color: "red"
  }];

 return (
          <div key={index} style={customStyle[index]}>
            {item}
          </div>
        );