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

Question

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

想法是将类别颜色值放在单独的文件中并引用它们。

我目前有这个。

<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 的 js 文件。我收到一个错误，其中 val 作为函数返回。但是，如果我只是 return 没有条件的 val，我会在 Dev Console 中看到我传递给它的类别的名称会返回。

有什么想法吗？谢谢

Answer 1

就这样

<Container onClick={playChannel} background={colorFromTheme(category)}>

和

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

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

Function Inside of Style Components Passing Variable

function

object

reactjs

styled-components