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?

score 130 · Accepted Answer · edited Aug 19 '15 at 17:41

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

Note that the ms prefixes should be lowercase, unlike the capitalized webkit prefixes: https://zhenyong.github.io/react/tips/inline-styles.html — Bryan Downing, Oct 29 '17 at 01:31

score 2 · Answer 2 · answered Sep 01 '15 at 23:20

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:

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

answered Sep 01 '15 at 23:20

tquetano-r7

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' }, }); ... But it doesn't work (I try to hide scrollbar in this case). – Vlado Jun 07 '22 at 16:48

score 1 · Answer 3 · answered Aug 19 '15 at 22:01

1

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

answered Aug 19 '15 at 22:01

Samuell

prefixfree is awesome, just ensure to re-call window.StyleFix.process() if your page content updates (e.g. router navigation callback) – Nick Oct 29 '15 at 05:18

score 1 · Answer 4 · answered Aug 19 '15 at 23:25

1

You can use something like this:

to automatically vendor-prefix your style objects.

answered Aug 19 '15 at 23:25

fabio.sussetto

4 Answers4