React中的CSS属性不会自动添加其供应商前缀。
例如,使用:
<div style={{ transform: 'rotate(90deg)' }}>Hello World</div>
在Safari中,将不会应用旋转。
我该如何完成?
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', ] } };