javascript - 如何使用变量设置样式化 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};`}
`;