如何在React中将多个特定于浏览器的值添加到CSS样式中？ [英] How do you add multiple browser specific values into a CSS style in React?

问题描述

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

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.

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

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?

推荐答案

如果您想使用内联样式并获得供应商前缀，则可以使用 Radium 为您抽象供应商前缀。

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.

通过添加在组件上使用 @Radium 装饰器，Radium会挂接到您传递给组件的样式中，并自动对其进行管理和添加前缀。

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

这篇关于如何在React中将多个特定于浏览器的值添加到CSS样式中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！