css3 – 如何将vendor前缀应用于reactjs中的内联样式?

前端之家收集整理的这篇文章主要介绍了css3 – 如何将vendor前缀应用于reactjs中的内联样式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
React中的CSS属性不会自动添加其供应商前缀。

例如:

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

在Safari中,旋转将不会被应用。

我如何才能实现这一点?

解决方法

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,#111);

因为对象不能有重复的键,所以只能通过了解这些浏览器支持哪些键来完成。

另一种选择是使用Radium作为样式工具链。其功能之一是自动供应商前缀。

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

var styles = {
  thing: {
    background: [
      'linear-gradient(90deg,#111)',// fallback
      'black',]
  }
};
原文链接:https://www.f2er.com/css/218591.html

猜你在找的CSS相关文章