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?
var style = 'cursor: "-moz-grab", cursor: "-webkit-grab", cursor: "grab" '; return <div style={style}>Grab me!</div>
Maybe not the best way but I can't think of anything else. You should also take a look to autoprefixer github.com/postcss/autoprefixer – alexmngn