Reactjs 传递变量的样式组件内部的函数

我有一个分类清单。 每个类别都有自己的颜色。 我希望将类别名称作为引用传递给样式组件，并让样式组件将类别作为字符串传递给将字符串映射到适当颜色值的函数

其思想是将类别颜色VAL放在单独的文件中并引用它们

我现在有这个

<Container
onClick={playChannel}
category={category}>

const Container = styled.div`
  background: ${colorFromTheme(({ category }) => category)};
`;

const colorFromTheme = val => ({ theme }) => {
  let color = val;
  console.log(val);

  if (Object.keys(theme).includes(val)) {
    color = theme[color];
  }

  return val;
};

const Container=styled.div`
背景：${colorFromTheme（（{category}）=>category）}；
`;
const colorFromTheme=val=>（{theme}）=>{
设color=val；
控制台日志（val）；
if（Object.keys（主题）.includes（val））{
颜色=主题[颜色]；
}
返回val；
};

这些都是当前正在传递的VAL。 主题是导出的常量的js文件。 我得到一个错误，val作为一个函数返回。 然而，如果我只是返回val而没有条件，我会在Dev控制台中看到我传递给它的类别的名称返回

有什么想法吗？谢谢。

就这么办吧

及

const Container=styled.div
背景：${（{background}）=>background}；

就这么做吧

及

const Container=styled.div
背景：${（{background}）=>background}；