如何在每个图标上单独更改颜色？反应，样式化的组件

Question

我正在学习 react 和 styled-components。我堆栈试图单独更改每个图标的颜色。有什么解决办法吗？

这是我想要的：

https://i.stack.imgur.com/tsANO.jpg

这是我的代码示例：

import React, { useState } from "react";
import styled from "styled-components";
import {
  GiSteak,
  GiCheeseWedge,
  GiFlatfish,
  GiChickenOven,
  GiBroccoli,
} from "react-icons/gi";

const StyledDiv = styled.div`
  width: 300px;
  div {
    font-size: 30px;
    color: #828282;
    color: ${({ color }) => (color ? "green" : "lightGrey")};
  }
`;

const Selections = () => {
  const [color, setColor] = useState(false);
  return (
    <StyledDiv color={color} onClick={() => setColor(!color)}>
      <p>Select your options</p>
      <div>
        <GiBroccoli />
        <GiCheeseWedge />
        <GiSteak />
        <GiFlatfish />
        <GiChickenOven />
      </div>
    </StyledDiv>

  );
};

Answer 1

您实际上是在询问如何处理多个状态（因此与 styled-components 无关），因为现在您对所有图标都有一个状态，您需要每个图标都有一个状态。

这是一种可能的解决方案，管理单个图标状态数组：

const Icon = styled.div`
  background-color: ${({ isColored }) => (isColored ? "green" : "lightGrey")};
`;

const StyledDiv = styled.div`
  width: 500px;
  .icon__box {
    display: flex;
    ${Icon} {
      border: 1px solid black;
      font-size: 30px;
      margin-right: 10px;
    }
  }
`;

const Icons = () => {
  const [areColored, setColor] = useState(Array(5).fill(false));
  console.log(areColored);
  return (
    <StyledDiv>
      <p>Select your options</p>
      <div className="icon__box">
        {areColored.map((isColored, index) => (
          <Icon
            key={index}
            isColored={isColored}
            onClick={() =>
              setColor((prev) => {
                const res = Object.assign([], prev, { [index]: !prev[index] });
                return res;
              })
            }
          >
            icon {index + 1}
          </Icon>
        ))}
      </div>
    </StyledDiv>
  );
};

• See similar question

Answer 2

嘿，你可以使用icon 状态来存储像{index:1,color:true} 这样的对象结构。将其与nth-child(...) css 选择器结合使用，您可以像这样完成任务：-

import React, { useState } from "react";
import styled from "styled-components";

const StyledDiv = styled.div`
  width: 500px;
  .icon__box{
    display: flex;
    div {
      border: 1px solid black;
      font-size: 30px;
      margin-right: 10px;
      background-color:lightgrey
    }
    div:nth-child(${({icon})=>icon.index+1}){
      background-color: ${({ icon }) => (icon.color ? "green" : "lightGrey")};
    }
  }
`;

const Icons = () => {
  const [icon, setIcon] = useState({index:0,color:false});
  const [icons] = useState(['icon1','icon2','icon3','icon4','icon5']);
  const handleClick=(index)=>{
     let newIcon = {...icon}
     newIcon.color = index!==newIcon.index?true:!newIcon.color;
     newIcon.index = index;
     setIcon(newIcon);
  }

  return (
    <StyledDiv icon={icon}>
      <p>Select your options</p>
      <div className="icon__box">
        {icons.map((icon,index)=>(<div onClick={()=>handleClick(index)}>{icon}</div>))}
      </div>
    </StyledDiv>
  );
};

export default Icons;

这是分叉的：-

注意：这里我为每个图标 div 的文本内容设置了icons 状态。如果您从props 派生上述内容，它将以相同的方式工作。所以这取决于你。