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

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?

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

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/

You can use something like this:

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

to automatically vendor-prefix your style objects.

Related