Реакция фонового изображения компонентов Syled

Question

Я пытаюсь пропустить фоновое изображение через подставку, и оно не работает, оно говорит, что 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 до <CardImage/>:

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

Answer 2

 function Card(props) {
  const style = {
    height: "150px",
    width: "150px",
    backgroundImage: `url(${props.data.url})`,
    backgroundRepeat: "no-repeat"
  };
  return <div style={style}>Background</div>;
}