Write repeated inline styles in reactor

Github.com/facebook/re… React does not support writing duplicate inline styles. What if you want to use background-image adaptive writing?

 backgroundImage: -webkit-image-set( url('test.png') 1x, url('test2x.png') 2x); 
 backgroundImage: image-set( url('test.png') 1x, url(${bannerImg}) 2x); 
 backgroundImage: url('test.png')
Copy the code

Write it like this:

const style = {
    backgroundImage: image-set( url('test.png') 1x, url(${bannerImg}) 2x),
    backgroundImage: url('test.png'),
    backgroundImage: -webkit-image-set( url('test.png') 1x, url('test2x.png') 2x), 
}
<div styl={style}></div>
Copy the code

Result: Only the last one will be applied

Successful writing :(refer toGithub.com/facebook/re…In)

const style = { backgroundImage: `url(${bannerImg}); image-set( url(${bannerImg}) 1x, url(${bannerImg}) 2x); -webkit-image-set( url(${bannerImg}) 1x, url(${bannerImg}) 2x)`, } <div styl={style}></div>Copy the code

Result: Multiple backgroundImage properties were successfully applied