How do I apply vendor prefixes to inline styles in

Question

CSS properties in React are not automatically added with their vendor prefixes.

For example, with:

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

In Safari, the rotation wouldn't be applied.

How do I get that accomplished?

Answer 1

You can use something like this:

https://github.com/cgarvis/react-vendor-prefix

to automatically vendor-prefix your style objects.

Answer 2

I actually faced the same problem, and none of the react prefixing libraries out there did the job I wanted. So I built one myself:

react-prefixer

It's still pretty young (built it this morning), but I will be maintaining it. Hopefully it helps.

Answer 3

I don't have experience with react.js, but look at this js library from Lea Verou. It prefixes style direct in DOM.

http://leaverou.github.io/prefixfree/

Answer 4

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',
    ]
  }
};