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

Question

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

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

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

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

#FFFFFF

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

Answer 1

如果要将 props 与样式化组件一起使用，则必须使用模板表达式并将其传递给函数。该函数将传递给您的 props，而您的函数 returns 将被添加到 CSS。在其中，您可以使用 props.

创建任何您想要的 CSS 字符串

例如：

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

How do I set the background color of a styled div using a variable?