React 中的 CSS 属性不会自动添加其供应商前缀。
例如，与：
<div style={{
transform: 'rotate(90deg)'
}}>Hello World</div>
在 Safari 中，不会应用旋转。
我如何做到这一点？
如何将供应商前缀应用于 reactjs 中的内联样式？
IT技术
css
reactjs
vendor-prefix
2021-04-11 12:48:03
4个回答
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);
因为对象不能有重复的键，所以这只能通过知道浏览器支持哪些键来完成。
另一种方法是使用Radium作为样式工具链。它的功能之一是自动供应商前缀。
我们的镭背景示例如下所示：
var styles = {
thing: {
background: [
'linear-gradient(90deg, black, #111)',
// fallback
'black',
]
}
};
我没有使用 react.js 的经验，但请查看 Lea Verou 的这个 js 库。它直接在 DOM 中添加样式前缀。