CSS3-如何在Reactjs中将供应商前缀应用于内联样式?

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

例如,使用:

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

在Safari中,不会应用旋转。

我该如何完成?

zealoushacker asked 2020-02-19T05:21:47Z
4个解决方案
76 votes

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用于样式工具链。 它的功能之一是自动供应商前缀。

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

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

      // fallback
      'black',
    ]
  }
};
zealoushacker answered 2020-02-19T05:22:46Z
1 votes

您可以使用如下形式:

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

自动为样式对象提供厂商前缀。

fabio.sussetto answered 2020-02-19T05:23:15Z
0 votes

我没有React.js的经验,但是请看Lea Verou的这个js库。 它在DOM中直接添加样式前缀。

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

Samuell answered 2020-02-19T05:23:40Z
0 votes

我实际上也遇到了同样的问题,而且所有的react前缀库都没有完成我想要的工作。 所以我自己建立了一个:

反应前缀

它仍然很年轻(今天早上建造),但是我会维护它。 希望它会有所帮助。

tquetano-r7 answered 2020-02-19T05:24:09Z
translate from https://stackoverflow.com:/questions/32100495/how-do-i-apply-vendor-prefixes-to-inline-styles-in-reactjs