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

【问题标题】：How do I set the background color of a styled div using a variable?如何使用变量设置样式 div 的背景颜色？
【发布时间】：2019-10-19 15:05:50
【问题描述】：

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

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

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

我从服务中获取backgroundColor 并且我已经验证它返回了正确的值：

#FFFFFF

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

【问题讨论】：

【解决方案1】：

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

例如：

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

【讨论】：