setting RGBA values in inline styles

Question

To set a color in a React inline style to an RGBA value I can at least use string interpolation in ES6:

<div style={{color: `rgba(${r}, ${g}, ${b}, ${a})`}}>test</div

Does React support objects instead of a string here? Something similar to it supporting numbers where pixel units are assumed for styles like width etc. For example:

<div style={{color: {r, g, b, a}}}>test</div

Answer 1

No. React supports no such function. I suggest either:

1. Use string interpolation as you've done above.
2. Write your own rgba() function.
3. Use a third party library. I recommend polished which has just such a function. https://polished.js.org/docs/#rgba