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），这一切似乎都能正常工作，但宽度编译为：

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）。

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

1 个答案: