How to Apply Vendor Prefixes to Inline Styles in Reactjs

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

React does not apply vendor prefixes automatically.

In order to add vendor prefixes, name the vendor prefix as per the following pattern, and add it as a separate prop:

-vendor-specific-prop: 'value'

becomes:

VendorSpecificProp: 'value'

So, in the example in the question, it needs to become:

<div style={{
    transform: 'rotate(90deg)',
    WebkitTransform: 'rotate(90deg)'
}}>Hello World</div>

Value prefixes can't be done in this way. For example this CSS:

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

Because objects can't have duplicate keys, this can only be done by knowing which of these the browser supports.

An alternative would be to use Radium for the styling toolchain. One of its features is automatic vendor prefixing.

Our background example in radium looks like this:

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

      // fallback
      'black',
    ]
  }
};

How to use prefixes for inline styles. React

Per the React docs:

Vendor prefixes other than ms should begin with a capital letter. This is why WebkitTransition has an uppercase "W".

So your inline styles would look like this:

return {  msTransform: 'rotateY(' + d.rotateY + 'rad) ' +    ' translateX(' + translateX + 'px)' +    ' translateZ(' + d.translateZ + 'px)' +    ' rotateY(' + d.rotateYAround + 'deg)',  ...,
  transform: 'rotateY(' + d.rotateY + 'rad) ' +    ' translateX(' + translateX + 'px)' +    ' translateZ(' + d.translateZ + 'px)' +    ' rotateY(' + d.rotateYAround + 'deg)',  ...}

-webkit-transition

webkitTransition