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

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?

Solution 1

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

Solution 2

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/

Solution 3

You can use something like this:

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

to automatically vendor-prefix your style objects.

Solution 4

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.

View more solutions

Comments

[Nick]

prefixfree is awesome, just ensure to re-call window.StyleFix.process() if your page content updates (e.g. router navigation callback)

[Bryan Downing]

Note that the ms prefixes should be lowercase, unlike the capitalized webkit prefixes: zhenyong.github.io/react/tips/inline-styles.html

[Vlado]

Could you please create sandbox with usage examples? I try with MUI components like: import prefix from 'react-prefixer'; const stylesFixed = prefix({ webkitScrollbar: { width: 0, background: 'transparent' }, }); <Box sx={{ height: '200px', width: '500px', overflowY: 'scroll' }} style={stylesFixed}>... But it doesn't work (I try to hide scrollbar in this case).