如何将背景图像 url 注入样式组件

Question

我使用 styled-components 作为设计库，我创建了一个 div，它将保存背景图像及其属性，如果我从样式组件外部注入图像 url，它不会占用并且会犯一些错误。

我会复制一些代码：

image-div 组件作为样式化组件：

const ImageDiv = styled.div`
  height: 100%;
  width: 100%;
  float: left;
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;

`
export default ImageDiv;

在屏幕上使用 ImageDiv 并将背景图像传递给它不会从上面获取背景属性

<ImageDiv style={{ backgroundImage: `url(${signin})` }} src = {signin} alt="logo" />

我希望能够将 url 作为 prop 传递并从上面将其注入到样式组件中

Answer 1

使用解构道具

const ImageDiv = styled.div`
  height: 100%;
  width: 100%;
  float: left;
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  background-image: ${({url}) => `url(${url})`};
`
export default ImageDiv;

Answer 2

您可以简单地将它作为另一个道具传递，然后在样式组件中使用它作为background-image 属性。

<ImageDiv bg={signin} src={signin} alt="logo" />

const ImageDiv = styled.div`
   background-image: url(${(props) => props.bg});   
`;