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

Posted 2023-02-22

【中文标题】如何将供应商前缀应用于 reactjs 中的内联样式？

【英文标题】：How do I apply vendor prefixes to inline styles in reactjs?

【发布时间】：2015-11-13 01:08:52

【问题描述】：

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

例如，用：

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

在 Safari 中，不会应用旋转。

我怎样才能做到这一点？

【参考方案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 作为样式工具链。它的功能之一是自动供应商前缀。

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

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

      // fallback
      'black',
    ]
  
;

【讨论】：

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

【参考方案2】：

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

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

【讨论】：

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

【参考方案3】：

你可以这样使用：

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

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

【参考方案4】：

我实际上遇到了同样的问题，并且没有一个反应前缀库可以完成我想要的工作。所以我自己造了一个：

react-prefixer

它还很年轻（今天早上建造的），但我会维护它。希望对您有所帮助。