Javascript @使用react中的镭进行媒体查询

我试图在react中使用radium库实现内嵌样式。我相信除了媒体的质疑，一切都很顺利。我也在使用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关键字的问题。

媒体查询，以及其他特殊的东西，如伪类：“：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文件中的重复性要多一些，但这就是你要做的

---

媒体查询和其他特殊的东西，如伪类“：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文件中的重复性要多一些，但这就是你要做的

---

谢谢让它工作起来。可能有点重复，但至少很容易阅读。谢谢！让它工作起来。可能有点重复，但至少很容易阅读。