css - 如何在React中将多个特定于浏览器的值添加到CSS样式中？

这主要是为给定的CSS属性定义特定于浏览器的值，例如：

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

如果我将其包装到这样的对象中：

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

那么您在对象中复制键（在严格模式下将失败，否则将被覆盖）。并且仅将所有值放入单个字符串似乎也不起作用。

用JS找出浏览器，然后应用正确的值似乎是太多的工作。或者是否有其他方法可以做到这一点？有任何想法吗？

最佳答案

如果要使用内联样式并获取供应商前缀，则可以使用Radium之类的库为您抽象供应商前缀。

通过向组件添加@Radium装饰器，Radium将钩住传递给组件的样式，并自动对其进行管理和添加前缀。

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!
};