如何将供应商前缀应用于reactjs中的内联样式？

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作为造型工具链。其特点之一是自动供应商前缀。在镭

我们的背景例子是这样的：

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

     // fallback 
     'black', 
    ] 
    } 
}; 

Answer 2

我没有与react.js经验，但看看这个js库从利·贝罗。它在DOM中直接指定样式。

http://leaverou.github.io/prefixfree/

Answer 3

您可以使用这样的事情：

https://github.com/cgarvis/react-vendor-prefix

自动售卖机前缀的样式对象。

Answer 4

我实际上面临同样的问题，没有任何反应前缀库在那里做我想要的工作。所以，我建立一个自己：

react-prefixer

这仍然是相当年轻（今早建），但我会保持它。希望它有帮助。