Multiple properties in ReactJS inlined styles object?

Question

How do I write something that is equivalent to

CSS

.class {
  display: flex;
  display: -webkit-flex;
}

but using inline styles in React?

I'm basically looking for something like:

JavaScript

let styles = {
  display: ['flex', '-webkit-flex']
}

This one have lot of options. github.com/FormidableLabs/radium — Sibiraj PR
– Sibiraj PR, Commented Jul 19, 2016 at 11:55

Damien Leroux · Accepted Answer · 2016-07-19 12:13:02Z

2

Your problem is a reactJS common problem still opened and waiting for a proper solution

For webkit style, one solution is to concat values:

let styles = {
  display: 'flex; display:-webkit-flex'
}

Otherwise, a more common solution is to create a CSS named 'flex' that will be given to the className property of your element.

Third solution: use Radium. I believe it too big & tedious for your problem but you can try it if you have time... :)

answered Jul 19, 2016 at 12:05

Damien Leroux

11.7k7 gold badges46 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1