Question

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

我想支持最新版本的主流浏览器（safari，chrome，FF，IE）。我也想使用flexbox。

以下样式var在所有浏览器中都不起作用：

const char *
_getfile(int argcount, const char ** argvars, char* buf)
{
    const char* relpath, *abspath;

    relpath = argvars[1];
    abspath = realpath(relpath, buffer);
    if (abspath != NULL)
    {
        // OK
        return abspath;
    } else {
        // handle
    }

我想我需要在上一个对象中添加这样的内容：

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

然而，到处都是相当费力的。是否有任何可以帮助解决这个问题的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属性而不是选择）。

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

1 个答案: