如何从Props创建变量并在Styled Components中复用？主题色调用报错

嗨，我来帮你搞定这个styled-components的小问题！你的错误根源在于在插值函数里嵌套了多余的箭头函数——外层的props =>已经能拿到完整的props对象了，包括theme，不需要再写第二个props =>来获取theme。

正确的基础写法 #

直接在条件判断里通过外层props访问主题颜色即可：

const Item = styled.ul`
  ${props => props.isHere ? `background: ${props.theme.colorGroupSelected};` : ''};
`;

复用变量的写法（如果需要多次使用主题色） #

如果这个主题颜色在组件样式里需要多次用到，你可以先在插值函数内部把它存成变量，再复用：

const Item = styled.ul`
  ${props => {
    // 提前提取主题色到变量，方便后续复用
    const selectedBgColor = props.theme.colorGroupSelected;
    // 根据isHere状态返回对应的样式
    return props.isHere ? `
      background: ${selectedBgColor};
      // 这里可以加其他需要用到selectedBgColor的样式，比如边框色
      border-color: ${selectedBgColor};
    ` : '';
  }};
`;

更简洁的写法（推荐） #

如果只是控制background属性，还可以把样式逻辑直接写在属性值的插值里，省略外层的条件包裹，更清爽：

const Item = styled.ul`
  background: ${props => props.isHere ? props.theme.colorGroupSelected : 'transparent'};
`;

这里把默认的背景设为transparent（透明），你可以根据自己的需求改成原来的默认背景色。

注意：确保你的组件已经被ThemeProvider包裹，并且theme对象里确实包含colorGroupSelected属性，否则会取不到值哦！

内容的提问来源于stack exchange，提问作者Evanss