Javascript 样式化的组件不会'；无法识别全局JS变量

我对某个组件的样式有问题。我的目标是显示三组单选按钮和四个正方形，每个（正方形）填充不同的颜色，我使用样式化组件，我的代码如下：

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>
  );
}

const colorArr=[“dc802c”、“363550”、“f6f6f6”、“eac9b5”，
“092532”、“adc9b7”、“89c9b8”、“e1ffc2”，
“222831”、“4f8a8b”、“EEEEE”、“fbd46d”]；
var colorString=“”；
让ColorContainer=styled.div
`
边界半径：4px；
边框：1em实心${colorString}；
`;
函数giveColor（colorNum）
{
colorString=colorArr[colorNum]；
return（）；
}
函数选择器（）
{
返回(
{giveColor（0）}
{giveColor（1）}
{giveColor（2）}
{giveColor（3）}
{giveColor（4）}
{giveColor（5）}
{giveColor（6）}
{giveColor（7）}
{giveColor（8）}
{giveColor（9）}
{giveColor（10）}
{giveColor（11）}
);
}

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

---

ThemesWrapper和ThemesWrapper只是添加了一些灵活性并对内容进行了调整。我得到的结果是三组四个小正方形按我的要求显示，但它们都是相同的颜色，没有单选按钮，我尝试了很多东西，但都没有得到我期望的结果，我是javascript的noob，反应并设置组件样式，因此我将非常感谢您的帮助。

请参阅

设置组件样式

有关如何使用此库，您需要通过回调来读取道具，例如：

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]} />;
}

const colorArr=[“#dc802c”、“#363550”、“…”；
让ColorContainer=styled.div`
边界半径：4px；
边框：1em solid${（props）=>props.color}；
`;
函数选择器（{index}）{
返回；
}

您刚刚更改了字符串值，这与更改道具有什么关系？这不是您使用样式化组件的方式，请阅读文档中的基础知识。