setting RGBA values in inline styles

akonsu

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
David L. Walsh

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related