如何使用变量设置样式 div 的背景颜色

Question

我正在尝试设置使用样式化的div 的反应组件的背景颜色。

我正在从另一个服务接收颜色值，<div>的样式如下：

const ContainerDiv = style.div `
  background: backgroundColor;
`;

我从服务获取backgroundColor并验证它是否返回正确的值：

#FFFFFF

但是，当我使用上面的代码时，背景颜色不会改变，但是如果我硬编码值以#FFFFFF，则背景颜色会发生变化。

Answer 1

如果要将props与样式化组件一起使用，则必须使用模板表达式并向其传递函数。 该函数将传递您的props，并且您的函数返回的任何内容都将添加到CSS中。 在其中，您可以使用这些props创建所需的任何CSS字符串。

例如：

const ContainerDiv = style.div `
    ${props => `background: ${background};`}
`;