道具的背景图像无法使用样式化的组件

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

我现在测试了它，我认为问题出在这里 <BackgroundImage/> - 组件没有任何高度？

只要我给它一个高度，例如height: 100vh; 一切正常。

道具的背景图像无法使用样式化的组件

Background image from props does not work using styled components

reactjs

styled-components