javascript - 样式化组件背景图像 React

Question

我正在尝试通过 prop 传递背景图像，但它不起作用，它说 url 未定义。

const CardImage = styled.div`
        height: auto;
        width: 100%;
        background-size: contain;
        background: url(${props => props.data.url});  
    `
function Card(props) {
    return (
        <CardImage/>
    )
}

<Card data={{url: "https://via.placeholder.com/150x150", text: "test"}}/>

Answer 1

你永远不会传递来自 Card 的 Prop 至 <CardImage/> :

function Card(props) {
  return <CardImage {...props} />;
}