如何将vendor prefixes 应用于 reactjs 中的内联样式

发布于08月20日

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

例如，使用:

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

在Safari中，不会应用旋转.

我怎样才能做到这一点？

推荐答案

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

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

-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);

因为对象不能有重复的关键点，所以只有知道浏览器支持哪些关键点才能做到这一点.

另一种 Select 是使用Radium作为造型工具链.它的一个特点是自动添加供应商前缀.

我们的镭背景示例如下所示:

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

      // fallback
      'black',
    ]
  }
};

实用课程推荐