ベンダープレフィックスが、私はアプリを反応させるのシンプルで私のスタイルをインライン化するラジウムを使用していますが、何とかラジウムは、ベンダーのコンパイルされたラジウム

Question

で一緒に接着されて次々に接頭辞：

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) 

このすべてが動作しているようです

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

そしてもちろんブラウザが、これは無効な値であることを不平を言っている：（のmaxWidthやマージンなど）の接頭辞ベンダーを必要としませんが、幅のようにコンパイルされる属性を持つ罰金。たとえば、display: flexと同じです。

Answer 1

固定されていますが、私は情報が1つ欠落していました。これはサーバーで古いレンダリングです。ラジウム設定で適切なユーザーエージェントを追加すると解決しました（https://github.com/FormidableLabs/radium/tree/master/docs/api#configuseragent）。