如何在reactjs中将供应商前缀应用于内联样式？ [英] How do I apply vendor prefixes to inline styles in reactjs?

问题描述

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

CSS properties in React are not automatically added with their vendor prefixes.

例如：

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

在Safari中，旋转不会应用。

In Safari, the rotation wouldn't be applied.

如何实现这一目标？

推荐答案

React不会自动应用供应商前缀。

React does not apply vendor prefixes automatically.

为了添加供应商前缀，根据以下模式命名供应商前缀，并将其添加为单独的prop：

In order to add vendor prefixes, name the vendor prefix as per the following pattern, and add it as a separate prop:

-vendor-specific-prop: 'value'

VendorSpecificProp: 'value'

因此，在问题的示例中，它需要成为：

So, in the example in the question, it needs to become:

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

无法以此方式完成值前缀。例如这个CSS：

Value prefixes can't be done in this way. For example this CSS:

background: black;
background: -webkit-linear-gradient(90deg, black, #111);
background: linear-gradient(90deg, black, #111);

因为对象不能有重复的键，所以只能通过知道这些浏览器

Because objects can't have duplicate keys, this can only be done by knowing which of these the browser supports.

另一种方法是使用 Radium 作为样式工具链。

An alternative would be to use Radium for the styling toolchain. One of its features is automatic vendor prefixing.

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

Our background example in radium looks like this:

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

      // fallback
      'black',
    ]
  }
};

这篇关于如何在reactjs中将供应商前缀应用于内联样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！