样式组件无法识别全局 JS 变量

Question

我在某些 React 组件的样式上遇到了问题。 我的目标是显示三组单选按钮和四个方块，每个（方块）填充不同的颜色，我使用的是样式组件，我的代码如下：

const colorArr = ["#dc802c","#363550","#f6f6f6","#eac9b5",
                  "#092532","#adc9b7","#89c9b8","#e1ffc2",
                  "#222831","#4f8a8b","#eeeeee","#fbd46d"];

var colorString = "";

let ColorContainer = styled.div
`
  border-radius: 4px; 
  border: 1em solid ${colorString};
`;

function giveColor(colorNum)
{
  colorString = colorArr[colorNum];
  return(<ColorContainer/>);
}

function Selector()
{
  return(
    <ThemesWrapper>
      <ThemeWrapper key="theme1">
        <input type="radio" name="theme1"/>
        {giveColor(0)}
        {giveColor(1)}
        {giveColor(2)}
        {giveColor(3)}
      </ThemeWrapper>
      <ThemeWrapper key="theme2">
        <input type="radio" name="theme2"/>
        {giveColor(4)}
        {giveColor(5)}
        {giveColor(6)}
        {giveColor(7)}
      </ThemeWrapper>
      <ThemeWrapper key="theme3">
        <input type="radio" name="theme3"/>
        {giveColor(8)}
        {giveColor(9)}
        {giveColor(10)}
        {giveColor(11)}
      </ThemeWrapper>
    </ThemesWrapper>
  );
}

我已经控制台记录了 colorString 并显示了颜色的字符串，所以问题似乎出在 ColorContainer 中，但我看不到它。

ThemesWrapper 和 Themesrapper 只是添加了一些 flex 并证明内容的合理性。 我得到的结果是我想要的三组四个小方块，但它们都具有相同的颜色并且没有单选按钮，我尝试了很多东西，但没有给我预期的结果，我是一个菜鸟在 javascript、react 和 style-components 中，我将非常感谢您的帮助。

Answer 1

关于如何使用这个库，请参见styled-components文档，你需要传递一个回调来读取一个 prop，例如：

const colorArr = ["#dc802c", "#363550", "..."];

let ColorContainer = styled.div`
  border-radius: 4px;
  border: 1em solid ${(props) => props.color};
`;

function Selector({index}) {
  return <ColorContainer color={colorArr[index]} />;
}