Add vendor prefixes for inline css in React for background Linear Gradient

Question

I want to use inline styles with a computed variable in my React Code - for background css property and the value is

const bkgStyle = {
  background: `linear-gradient(97.84deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), ${primaryColor}`,
  height: '165px',
};

How can I add vendor prefix for this - nothing works. If i add multiple keys 'background' in bkgStyle then also it doesnt work. and the value for background - is also not accepting a string containing values for all vendors.

Help!!!

Answer 1

You can add vendor prefixes by adding them to the value of the main key. EG:

const bkgStyle = {
    display: '-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex'
}