How do you add multiple browser specific values into a CSS style in React?

Question

This is mainly to define browser specific values like this one for a given CSS property:

<div style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">Grab me!</div>

If I wrap it into object like this:

<div style={{
    cursor: "-moz-grab",
    cursor: "-webkit-grab",
    cursor: "grab"
}}>Grab me!</div>

then you duplicate keys in an object (would fail in strict mode and would overwrite otherwise). And simply putting all values into single string doesn't seem to work either.

Figuring out browser with JS and then applying right value seems to be too much work.. Or is there a different approach to do this? Any ideas?

Answer 1

If you want to use inline styles and also get vendor prefixing, you can use a library like Radium to abstract the vendor prefixing for you.

By adding a @Radium decorator to your component, Radium will hook into the styles you pass to the component and automatically manage and prefix them.

var Radium = require('radium');
var React = require('react');

@Radium
class Grabby extends React.Component {
  render() {
    return (
      <div style={style}>
        {this.props.children}
      </div>
    );
  }
}

var style = {
  cursor: "grab" // this will get autoprefixed for you!
};

Answer 2

The best you could do is to create a css class with the cursor attribute, and add it to your component

.container {
  height: 10px;
  width: 10px;
}

.grab {
  cursor: -moz-grab,
  cursor: -webkit-grab,
  cursor: grab,
}

Then in your react component:

var isGrabEnabled = true;

<div className={['container', (isGrabEnabled ? 'grab' : '')]}>Grab me!</div>