2017-03-12 11 views
1

私は以下の反応コードを持っています.Rediumをインラインスタイルに使用すると、メディアクエリが機能しません。空白のページを単に出力として表示します。RadiumでMedia Queryが機能しない

import React, { Component } from 'react'; 
import Radium from 'Radium'; 



class contact extends React.Component { 



    render() { 

    var styles = { 
    base: { 
    background: 'blue', 
    border: 0, 
    borderRadius: 4, 
    color: 'red', 
    padding: '1.5em', 
    '@media (max-width: 700px)': { 
     background: 'yellow' 
    } 
}, 
}; 

    return (
<div style={styles.base}> 
     <p>Hello, World!</p> 
</div> 

    ) 
    } 
} 

module.exports = Radium(Contact); 

私はここで問題が何かを見つけるのを助ける必要があります。前もって感謝します!

答えて

0

インポート反応、{コンポーネント}から '反応'; 「ラジウム」からラジウムを輸入する。

クラスとの接触は、コンポーネント{ は(レンダリング){

var styles = { 
    base: { 
    background: 'blue', 
    border: 0, 
    borderRadius: 4, 
    color: 'red', 
    padding: '1.5em', 
'@media (max-width: 700px)': { 
    background: 'yellow' 
    } 
    } 

を}延び。

return (
    <div style={styles.base}> 
    <p>Hello, World!</p> 
    </div> 

) 

}}

連絡=ラジウム(接触) 輸出連絡先

関連する問題