@在react中使用radium的媒体查询

Question

我正在尝试使用radium库在react中实现线条样式。我相信一切都很好，除了媒体的询问。我也在使用flex-box，我希望当屏幕尺寸是横向时，按钮显示在行中，当屏幕是纵向时，按钮显示在单列中。

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>
      )
    }
}

关于这个问题的文档很少。我想知道这是不是li，ul，a关键字的问题。