React에서 CSS 배경 속기 속성을 사용하지 마십시오.

문제

나는 최근에 직장에서 이 버그를 발견했고 그것을 알아내는 데 1분이 걸렸습니다. 내가 가진 것은 다음과 같았습니다.

<div 
  className="image-container" 
  style={{ 
    position: 'absolute', 
    top: `${top}%`, 
    left: `${left}%`, 
    width: `${width}%`, 
    height: `${height}%`, 
    background: `transparent url(${image_url}) no-repeat 
    center center`, backgroundSize: 'contain'
  }}
/>

모든 것이 괜찮은 것 같죠? 글쎄, 이론상. 하지만 애플리케이션이 시작되자마자 backgroundSize 속성이 작동하지 않는 것을 발견했습니다!

구글링을 해보자

출력 HTML과 약간의 인터넷 검색을 조사한 후 이것을 발견했습니다closed issue on React's Github.

분명히 CSSbackground 속기 속성을 backgroundSize 소품과 함께 사용하면 background 속성이 업데이트되면 이 마지막 속성이 지워집니다.

충분해, 수정하자

빠르고 쉬운 수정은 단축 속성을 확장하여 모든 속성을 명시적으로 설정하는 것입니다.

<div 
  className="image-container" 
  style={{ 
    position: 'absolute', 
    top: `${top}%`, 
    left: `${left}%`, 
    width: `${width}%`, 
    height: `${height}%`, 
    backgroundColor: 'transparent', 
    backgroundImage: `url(${image_url})`, 
    backgroundRepeat: 'no-repeat', 
    backgroundPosition: 'center center', 
    backgroundSize: 'contain' 
  }}
/>

그게 다야! 💪🏻