В чем разница в этих двух способах записи стилей?

Question

[Gary_Ihar]

Вариант 1:

style ={{background: `url(${props.item.img}) center center no-repeat`,}}

Вариант 2:

style ={{   
    backgroundImage: `url(${props.item.img})`,
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
}}

В чем принципиальная разница между двумя способами записи стилей инлайново в React?
Вопрос возник потому, что вариант 1 иногда пропускает свойство "center center". Пришлось записать через вариант 2 и все стало нормально. Почему так произошло?

Answer 1

[Aetae]

Подозреваю в img какой-то мусор прилетает, что и отрубает остальную часть записи. В остальном никакой разницы. Ну разве что background перезаписывает все остальные свойства(даже те что не указаны, т.е. если был задан background-color - он станет по умолчанию, т.е. прозрачным).

Comments

[Gary_Ihar]

Да не, картинка прилетает всегда. А вот свойство "center center" нет

[Aetae]

Gary_Ihar, я имел ввиду, если в props.item.img будет что-то типа site.ru/img); то он обрежет.

[Gary_Ihar]

Aetae, чет я не воткнул, можно подробнее, что и как обрежет? Можно строку пришло/стало

[Sergio]

ошибка синтаксическая будет, вот и не сработает стиль

можно заключить урл в кавычки, должно помочь немного (хотя если в props.item.img будут тоже кавычки, то не поможет)