css3 - How do I apply vendor prefixes to inline styles in reactjs? -

css properties in react not automatically added vendor prefixes.

for example, with:

<div style={{     transform: 'rotate(90deg)' }}>hello world</div>

in safari, rotation wouldn't applied.

how accomplished?

react not apply vendor prefixes automatically.

in order add vendor prefixes, name vendor prefix per following pattern, , add separate prop:

-vendor-specific-prop: 'value'

becomes:

vendorspecificprop: 'value'

so, in example in question, needs become:

<div style={{     transform: 'rotate(90deg)',     webkittransform: 'rotate(90deg)' }}>hello world</div>

value prefixes can't done in way. example css:

background: black; background: -webkit-linear-gradient(90deg, black, #111); background: linear-gradient(90deg, black, #111);

because objects can't have duplicate keys, can done knowing of these browser supports.

an alternative use radium styling toolchain. 1 of features automatic vendor prefixing.

our background example in radium looks this:

var styles = {   thing: {     background: [       'linear-gradient(90deg, black, #111)',        // fallback       'black',     ]   } };

YU