Фоновое изображение из реквизита не работает с использованием стилизованных компонентов

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; работает нормально.