Styled Component 和 ReactJs 的 CSS 中的 Dynamic 属性

Question

我正在尝试动态设置图像，如下所示：

const IntroVideoWrapper = styled.div`
  background-image: url("../images/${(props)=>props.image_prefix}_427.png"); 
`;

但是，图像未显示。当我查看调试器工具时，它被解析为：

background-image: url("../images/" + selfie + "_427.png" )

而不是：

background-image: url("../images/selfie_427.png" )

怎么了？

Answer 1

您第一次尝试使用 `` 时犯了一个错误。

background-image: url(${props => `../images/${props.image_prefix}_427.png`});

Answer 2

回调函数必须 return 整个字符串，如下所示

background: ${props => `url('../images/${props.selfie}_427.png.jpg')`};

Dynamic property in CSS of Styled Component and ReactJs