ラジウムを反応させた@mediaクエリー

Question

ラジウムライブラリーを使った反応でラインスタイルで実装しようとしています。私はメディアの質問以外はすべてうまくいっていると信じています。私もフレックスボックスを使用して、画面サイズが横長の場合はボタンを横に表示し、縦長の場合はボタンを1列に表示します。

import React from 'react'; 
import {Grid, Row, Col} from 'react-flexbox-grid/lib'; 
import Radium from 'radium'; 

import NavBar from "../components/NavBar"; 
import ButtonNav from "../components/ButtonNav"; 
import Footer from "../components/Footer"; 

@Radium 
export default class Home extends React.Component { 


    render() { 

    var mainNav = { 
    main: { 
     fontSize: '12px', 
     background: '#eee', 
    }, 

     ul: { 
     margin: '0', 
     padding: '0', 
     display: 'flex', 
     flexWrap: 'wrap', 
     justifyContent: 'space-around', 
     listStyle: 'none', 
     }, 

     li: { 
     borderStyle: 'solid', 
     borderRadius: '4px', 
     borderWidth: '1px', 
     margin: '50px', 
     }, 

     a: { 
     padding: '1.25rem 0.5rem', 
     fontSize: '1.6rem', 
     maxWidth: '140px', 
     fontWeight: 'bold', 
     textDecoration: 'none', 
     display: 'flex', 
     alignItems: 'flex-start', 
     color: '#333', 
     }, 

    '@media screen and (orientation: landscape)': { 
     ul: { 
     flexDirection: 'row', 
     }, 

     li: { 
     width: '35%', 
     textAlign: 'center', 
     paddingBottom: '500px', 
     }, 

     a: { 
     fontSize: 'rem', 
     }, 
    }, 

    '@media screen and (orientation: portrait)': { 
     ul: { 
     flexDirection: 'column', 
     }, 
    } 
    }; 



    return (
     <div> 
     <nav role='navigation' style={mainNav.main}> 
      <ul style={mainNav.ul}> 
      <li style={mainNav.li}> 
       <a href="#" style={mainNav.a}> 
       <div> 
        Home 
       </div> 
       </a> 
      </li> 
      <li style={mainNav.li}> 
       <a href="#" style={mainNav.a}> 
       <div> 
        About 
       </div> 
       </a> 
      </li> 
      <li style={mainNav.li}> 
       <a href="#" style={mainNav.a}> 
       <div> 
        Clients 
       </div> 
       </a> 
      </li> 
      <li style={mainNav.li}> 
       <a href="#" style={mainNav.a}> 
       <div> 
        Contact 
       </div> 
       </a> 
      </li> 
      </ul> 
     </nav> 
     </div> 
    ) 
    } 
} 

この問題のドキュメントはほとんどありません。イム、それは多分、李、ul、キーワードの問題かどうか疑問に思っています。

Answer 1

メディアクエリや擬似クラス（':hover'）などの特別なものは、スタイリングに使用するオブジェクトのオブジェクトプロパティです。だから、例えば、あなたのliスタイルオブジェクトにメディアクエリを追加したい場合は、あなたがそこにそれを追加します。

var mainNav = { 
    li: { 
    borderStyle: 'solid', 
    borderRadius: '4px', 
    borderWidth: '1px', 
    margin: '50px', 

    '@media screen and (orientation: landscape)': { 
     width: '35%', 
     textAlign: 'center', 
     paddingBottom: '500px', 
    } 
    }, 
} 

はい、それはもう少し繰り返しCSSファイルよりもかもしれないが、これはあなたが行う方法ですそれ。

https://github.com/FormidableLabs/radium/tree/master/docs/api#sample-style-object