Syled 组件背景图像 React

本文介绍了Syled 组件背景图像 React的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图通过道具传递背景图片但它不起作用，它说 url 未定义.

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

推荐答案

你永远不会将道具从 Card 传递给 :

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

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

这篇关于Syled 组件背景图像 React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！