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

Posted 2023-02-22

【中文标题】使用 ReactJS 的跨浏览器 flexbox 内联样式

【英文标题】：Cross-browser flexbox in-line styling with ReactJS

【发布时间】：2016-05-31 05:56:55

【问题描述】：

我正在 React 中构建一个使用内联样式的 Web 应用程序。

我想支持最新版本的主流浏览器（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 可以帮助解决这个问题？或者可能会转换代码的东西？

谢谢！

【参考方案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 属性而不是选择）。