Syled Components Background Image React

问题

I am trying to pass a background image through a prop and it's not working, it's saying that url is undefined.

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"}}/>

回答1:

You are never passing the props from Card to <CardImage/>:

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

回答2:

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

来源：https://stackoverflow.com/questions/58617591/syled-components-background-image-react