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

Question

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

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

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

从服务中获取backgroundColor的地方，并且我已验证其返回正确的值：

#FFFFFF

但是，当我使用上述代码时，背景色不会改变，但是如果我将值硬编码为#FFFFFF，那么背景色就会改变。

Answer 1

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

例如：

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