CODEWITHSUNDEEP
reactjs
akonsu
akonsu

Reputation: 29566

setting RGBA values in inline styles

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

Upvotes: 12

Views: 16025

Answers (2)

VaneZzo
VaneZzo

Reputation: 11

Make your color a constant, and put it in backticks, for example: const blueColor = `rgba(64, 107, 169, 1)`;

Upvotes: 1

David L. Walsh
David L. Walsh

Reputation: 24815

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

Upvotes: 6

Related Questions