响应

Question

我试图在使用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，关键词的问题。

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