javascript - @media 在 react 中查询镭

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 关键词有问题。

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