Javascript 使用ReactJS的跨浏览器flexbox内嵌样式

我正在React中构建一个web应用程序，它使用在线样式

我想支持最新版本的主要浏览器（safari、chrome、FF、IE）。我还想使用flexbox

以下样式变量不适用于所有浏览器：

var ContainerStyle = {
  display: 'flex',
  flexDirection: 'row',
  flex: '1 1 auto',
  backgroundColor: '#EFEFEF',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center'
};

我想我需要在前面的对象中添加类似的内容：

{
    display: '-webkit-flex',
    display: '-moz-flex',
    display: '-ms-flex',
    display: '-o-flex',
    display: 'flex',
    -webkit-flex-direction: 'row',
    -moz-flex-direction: 'row',
    -ms-flex-direction: 'row',
    -o-flex-direction: 'row',
    flex-direction: 'row'
}

然而，这将是相当费劲的地方放。是否有任何polyfills可以对此提供帮助？或者是可以传输代码的东西

---

谢谢

一个快速建议是使用镭（）。它还支持自动前缀、媒体查询和伪选择器

或者，您可以围绕样式对象编写自己的包装器。请记住，您是在Javascript和客户机上创建样式的，因此您知道您正在运行的浏览器，并且应该能够只使用所需的前缀

大概是这样的：

var ContainerStyle = {
  display: (browser.webkit) ? '-webkit-flex' : 'flex',
  //flexDirection: 'row', not here!
};

// but here:
if (browser.webkit) {
    ContainerStyle.WebkitFlexDirection = 'row'
}

当然，您可以将所有这些放在一个模块中，并在应用之前将需要修改的样式传递给它。我相信Radium（类似于其他库）在某种意义上做了类似的事情（尽管我认为它们只是输出整个带前缀的CSS属性，而不是选择）