React - Linear Gradient Inline Style vendor prefixes

Question

How can I do use linear gradient vendor prefixes in react? Is possible to do this without using any external package?

This doesn't work because an object can't have keys with same name so no style is applied to the div.

I can't use classes because I will use component variables inside this code.

      const sizeBackground = {
        background: `-webkit-linear-gradient(left, #000 50%, #fff 50%)`,
        background: `-moz-linear-gradient(left, #000 50%, #fff 50%)`,
        background: `-ms-linear-gradient(left, #000 50%, #fff 50%)`,
        background: `linear-gradient(left, #000 50%, #fff 50%)`,
      }    

<div style={sizeBackground} >

Possible duplicate of How do you add multiple browser specific values into a CSS style in React? — Cameron Downer

Black Hole Black Hole · Accepted Answer · 2019-04-25T18:23:11

you need keep all in one sentence as all parameter of background:. After you need add the style to the DOM, in this case div. so add style={{background: _valueOfBackground_}}. takaking advantage of this valueOfBackground can be a variable you can put sizeBackground;

  const sizeBackground =
     `-webkit-linear-gradient(left, #000 50%, #fff 50%)
     -moz-linear-gradient(left, #000 50%, #fff 50%)
     -ms-linear-gradient(left, #000 50%, #fff 50%)
     linear-gradient(left, #000 50%, #fff 50%)`    

<div style={{background:sizeBackground}}>

React - Linear Gradient Inline Style vendor prefixes

1 Answers