javascript - 使用 ReactJS 的跨浏览器 flexbox 内联样式

Question

我正在 React 中构建一个使用内联样式的网络应用。

我想支持最新版本的主流浏览器(safari、chrome、FF、IE)。我也想用 flexbox。

以下样式 var，不适用于所有浏览器:

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'
}

但是，将其放置在任何地方都相当费力。是否有任何 polyfill 可以帮助解决这个问题？或者可能会转换代码的东西？

谢谢!

Answer 1

一个快速的建议是使用 Radium ( http://formidable.com/open-source/radium/ )。它支持自动前缀、媒体查询和伪选择器。

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

像这样:

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

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

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