CSS 如何将供应商前缀应用于 reactjs 中的内联样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32100495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I apply vendor prefixes to inline styles in reactjs?
提问by zealoushacker
CSS properties in React are not automatically added with their vendor prefixes.
React 中的 CSS 属性不会自动添加其供应商前缀。
For example, with:
例如，与：
<div style={{
transform: 'rotate(90deg)'
}}>Hello World</div>
In Safari, the rotation wouldn't be applied.
在 Safari 中，不会应用旋转。
How do I get that accomplished?
我如何做到这一点？
回答by zealoushacker
React does not apply vendor prefixes automatically.
React 不会自动应用供应商前缀。
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'
becomes:
变成：
VendorSpecificProp: 'value'
So, in the example in the question, it needs to become:
因此，在问题中的示例中，它需要变为：
<div style={{
transform: 'rotate(90deg)',
WebkitTransform: 'rotate(90deg)'
}}>Hello World</div>
Value prefixes can't be done in this way. For example this CSS:
值前缀不能以这种方式完成。例如这个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.
因为对象不能有重复的键，所以这只能通过知道浏览器支持哪些键来完成。
An alternative would be to use Radiumfor 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',
]
}
};
回答by fabio.sussetto
You can use something like this:
你可以使用这样的东西：
https://github.com/cgarvis/react-vendor-prefix
https://github.com/cgarvis/react-vendor-prefix
to automatically vendor-prefix your style objects.
自动为您的样式对象添加供应商前缀。
回答by tquetano-r7
I actually faced the same problem, and none of the react prefixing libraries out there did the job I wanted. So I built one myself:
我实际上遇到了同样的问题，而且没有一个反应前缀库能完成我想要的工作。所以我自己建了一个：
It's still pretty young (built it this morning), but I will be maintaining it. Hopefully it helps.
它仍然很年轻（今天早上建成），但我会维护它。希望它有帮助。
回答by Samuell
I don't have experience with react.js, but look at this js library from Lea Verou. It prefixes style direct in DOM.
我没有使用 react.js 的经验，但请查看 Lea Verou 的这个 js 库。它直接在 DOM 中添加样式前缀。
