道具的背景图片在使用样式化组件时不起作用

Question

我有一个样式化的组件，我传递了一个用作背景图片的url，但是它不起作用。我见过其他类似的问题，但没有任何解决办法。

我的样式组件：

export const BackgroundImage = styled.div`
  background: ${props => `url(${props.background})`};
  background-position: center;
  background-size: cover;
`;

我这样使用它：

<BackgroundImage background="https://imageurl.jpg" />

当我在浏览器中查看开发人员工具时，会得到以下提示：

因此，它似乎已正确编译，但是您实际上看不到页面上的图像。

Answer 1

我现在进行了测试，我认为问题出在ifelse-组件没有任何高度？

我给它一个高度，例如<BackgroundImage/>运行正常。