How to set the same property twice with React inline styles

Lately when needing to provide Webp background image image-sets I discovered a way to set the same React inline style property twice.

Table of contents

When building React applications it is common to use properties on an element to set inline styles. The problem with this approach is that the style attribute accepts a Javascript object and these objects cannot have the same key twice. This means in order to provide fallback inlines styles we need a different approach.

Background image-set

Did you know you can set responsive background images using the css function? This little known function acts in a similar way to the tags and the attribute.