供应商前缀以Radium粘合在一起

Question

我正在使用Radium在一个简单的React应用程序中内联我的样式，但不知何故，Radium正在一个接一个地编译供应商前缀：

import Radium from 'radium'
import React from 'react'

const styles = {
    base: {
        width: 'calc(100% - 4rem)',
        maxWidth: '60rem',
        margin: '0 auto'
    }
}

const Container = function (props) {
    return <div className='container' style={styles.base}>
        {props.children}
    </div>
}

export default Radium(Container)

对于不需要供应商前缀的属性(如maxWidth或margin)，这一切似乎都很好用，但with被编译为：

width: -webkit-calc(100% - 4rem),-moz-calc(100% - 4rem),calc(100% - 4rem);

当然，浏览器会抱怨这是一个无效值。例如，display: flex也是如此。

有什么想法吗？

Answer 1

修复后，我遗漏了一条信息:这是在服务器中呈现的旧信息。在radium配置中添加适当的用户代理解决了这个问题(https://github.com/FormidableLabs/radium/tree/master/docs/api#configuseragent)。