如何在Reactjs中对内联样式应用供应商前缀？

Question

在React中，CSS属性不会自动添加其供应商前缀。 例如：

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

在Safari浏览器中，旋转效果无法应用。

我该如何实现这个效果？

- zealoushacker

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

- zealoushacker

---

请注意，与大写的webkit前缀不同，ms前缀应该是小写的：https://zhenyong.github.io/react/tips/inline-styles.html - Bryan Downing

Answer 2

我曾经遇到过同样的问题，但是市面上的react前缀库都不能满足我的需求。所以我自己编写了一个：react-prefixer。它还很年轻（今天早上才编写），但我会继续维护它。希望它能对你有所帮助。

- tquetano-r7

---

请问您能否创建一个带有使用示例的沙盒？我尝试使用MUI组件，例如：import prefix from 'react-prefixer'; const stylesFixed = prefix({ webkitScrollbar: { width: 0, background: 'transparent' }, }); <Box sx={{ height: '200px', width: '500px', overflowY: 'scroll' }} style={stylesFixed}>...但它不起作用（在这种情况下，我试图隐藏滚动条）。 - Vlado

Answer 3

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

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

- Samuell

---

prefixfree 很棒，只需确保在页面内容更新时重新调用 window.StyleFix.process()（例如路由导航回调）。 - Nick

Answer 4

你可以使用类似这样的代码：

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

自动添加供应商前缀以适配您的样式对象。

- fabio.sussetto