Question

React中的CSS属性不会自动添加其供应商前缀。

例如，使用：

<div style={{
    transform: 'rotate(90deg)'
}}>Hello World</div>

在Safari中，不会应用旋转。

我如何实现这一目标？

Answer 1

React不会自动应用供应商前缀。

要添加供应商前缀，请按照以下模式命名供应商前缀，并将其添加为单独的道具：

-vendor-specific-prop: 'value'

变为：

VendorSpecificProp: 'value'

因此，在问题的例子中，它需要成为：

<div style={{
    transform: 'rotate(90deg)',
    WebkitTransform: 'rotate(90deg)'
}}>Hello World</div>

不能以这种方式完成值前缀。例如这个CSS：

background: black;
background: -webkit-linear-gradient(90deg, black, #111);
background: linear-gradient(90deg, black, #111);

因为对象不能有重复的密钥，所以只能通过了解浏览器支持哪些内容来完成。

另一种方法是使用Radium作为样式工具链。它的一个功能是自动供应商前缀。

我们在radium中的背景示例如下所示：

var styles = {
  thing: {
    background: [
      'linear-gradient(90deg, black, #111)',

      // fallback
      'black',
    ]
  }
};

Answer 2

您可以使用以下内容：

自动为您的样式对象添加前缀。

Answer 3

我实际上遇到了同样的问题，并没有任何反应前缀库完成了我想要的工作。所以我自己建了一个：

它还很年轻（今天早上建造它），但我会保持它。希望它有所帮助。

Answer 4

我没有使用react.js的经验，但是看看Lea Verou的这个js库。它在DOM中直接为样式添加前缀。