Откат на background-color, когда background-image имеет значение null React

Question

Создание компонента React, где я пытаюсь использовать свойство css для background-color, чтобы вернуться, когда background-image равно null, поскольку я мог видеть одно из сообщений SO здесь . Код работает только при наличии какого-либо изображения, но при его отсутствии он не возвращается к background-color и показывает ошибку undefined:1 GET http://localhost:3000/undefined 404 (Not Found). Что мне не хватает?

const BoxModule = ({
  backgroundColor,
  BackgroundImage,

}) => {

const imageFormats = BackgroundImage?.formats;
const imageSrc = formatImage({ formats: imageFormats });

if (!BackgroundImage || !BackgroundImage?.url) {
  return null;
}

return (
 <Section
   backgroundColor={backgroundColor}
   backgroundImageUrl={imageSrc}
 >
 ...
 </Section>
); 

export default BoxModule;
 
const Section = styled(Section)`
  background-color: ${(p) => p.backgroundColor};
  background-image: ${(p) => `url('${p.backgroundImageUrl}')`};
  background-repeat: no-repeat;
`;

[Обновленная трассировка ошибки]

Я вижу только ошибку, как показано ниже:

введите описание изображения здесь

Это ошибка из-за того, что код пытается обработать image, который не работает из-за значения null и, следовательно, не возвращается к bacground-color?

Answer 1

На самом деле кода было достаточно, чтобы вернуться к background-color. Проблема была не в этом, а в другом. Итак, чтобы ответить на этот конкретный вопрос, достаточно следующего кода. Не требуется даже условная проверка на null для background-image.

const Section = styled(Section)`
background-color: ${(p) => p.backgroundColor};
background-image: ${(p) => `url('${p.backgroundImageUrl}')`};
background-repeat: no-repeat;
`;