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

【问题标题】：A styled component doesn't recognize a global JS variable样式化组件无法识别全局 JS 变量
【发布时间】：2021-03-05 20:18:14
【问题描述】：

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

【问题讨论】：

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

标签： javascript html css reactjs styled-components

【解决方案1】：

这个库的使用方法见styled-componentsdocs，需要传递一个回调来读取一个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]} />;
}

【讨论】：