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

Question

这主要是为给定的 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 找出浏览器然后应用正确的值似乎工作量太大了。或者是否有不同的方法来做到这一点？有什么想法吗？

Answer 1

如果您想使用内联样式并获得供应商前缀，您可以使用像Radium 这样的库。为您提取供应商前缀。

通过向您的组件添加一个 @Radium 装饰器，Radium 将 Hook 您传递给该组件的样式并自动管理它们并为其添加前缀。

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