2016-12-16 5 views
2

すべてのインラインスタイルでhtmlが醜くならないように、すべてのインラインラジウムスタイルをクラスに抽出できますか?私はこのているRadium inline CSS - ビルドエクスポートクラスですか?

@Radium 
class ExtendedComponent extends Component { 
    render() { 
    return (
     <div style={[styles.color, styles.box]}</div> 
    ); 
    } 
} 

const styles = { 
    color: { 
    color: green 
    }, 

    box: { 
    borderColor: red, 
    height: '20px', 
    width: '20px' 
    } 
}; 

今出力HTMLは次のようなものになります。

<div class="c1"></div> 

CSS:

<div style="color: green; border-color: red; height: 20px; width: 20px;"></div> 

を私はのためのそれのようなものであることを考えルールには以下が含まれます:

.c1 { 
    color: green; 
    border-color: red; 
    height: 20px; 
    width: 20px; 
} 

答えて

0

私は認識していません。 Radiumは本質的にインラインスタイルを動的に計算して適用するために使用され、JS内のスタイルをバンドルすることでReact Component 'Module'を利用します。

リアクションスタイル 下記のリンクのリストから、これは必要な処理を行っているようです。 https://github.com/FormidableLabs/radium/tree/master/docs/comparison: - セクション「ビルド時にCSSにスタイルを抽出」を参照してくださいここでhttps://github.com/js-next/react-style#extracting-styles-into-css-at-build-time

代替ライブラリ は、あなたがやりたいだろういくつかの選択肢へのリンクです。

関連する問題