1

isomorphic-css-loaderを使用して、サーバー側のレンダリングでCSSモジュールを動作させることができます。しかし、実際には、反応コンポーネントhtmlタグにインラインスタイルを動的に追加する必要があります。これは、cssモジュールのデフォルトスタイルのように、インラインスタイルの更新スタイルです。それを同時に使用することは可能でしょうか?ただSSRのラジウム+ CSSのモジュールのような...ここでSSRのReactコンポーネントでCSSモジュールとインラインスタイルを併用できますか?

は、通常のCSSモジュールのシナリオです:

// MyComponent.scss

.root { padding: 10px; } 
.title { color: red; } 

// MyComponent.js

import React, { PropTypes } from 'react'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './MyComponent.scss'; 

function MyComponent(props, context) { 
    return (
    <div className={s.root}> 
     <h1 className={s.title}>Hello, world!</h1> 
    </div> 
); 
} 

export default withStyles(s)(MyComponent); 

私はしたいと思います:

function MyComponent(props, context) { 
    stylesSet.custom = { 
     fontSize, 
     marginTop 
    }; 

    return (
    <div className={s.root} style={[stylesSet.custom]}> 
     <h1 className={s.title}>Hello, world!</h1> 
    </div> 
); 
} 

答えて

2

classNameとスタイルを混在させることができます。いくつかの時間あなたは他の方法はありませんが、それを行うには、例えば、いくつかのプロパティがユーザーとの対話に基づいており、カラーピッカー、スライダーなどで

ただ従うstandard React inline style guideline

<div className={s.root} style={stylesSet.custom}> 
+0

はい、私はすでに、同時にCSSモジュールとラジウムを使用する、ありがとう! :) –

関連する問題