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

Question

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

例如:

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

在 Safari 中，不会应用旋转。

我怎样才能做到这一点？

Answer 1

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

为了添加供应商前缀，请按照以下模式命名供应商前缀，并将其添加为单独的 prop:

-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',
    ]
  }
};