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

Question

我使用样式化组件作为设计库，我创建了一个 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

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

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

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

Answer 2

使用解构道具

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;

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

How to inject background image url into styled-components

reactjs

styled-components