我如何在 react js 中使用镭

问题描述

我正在尝试使用镭反应 js 提供样式，但它不起作用

这是 Nav.css

nav{
    width: 15%;
    height: auto;
    display:block; 
    background-color: #282c34;      
}    

nav a{  
    display: block;    
    text-decoration: none;
    color: #ffff; 
    padding: 10px;  
}

nav a:hover{
    background-color: #414753;   
}

这是 nav.js

import React from 'react';
import Radium from 'radium';
import './Nav.css';

function Nav(open){

    const StyleCompleted =  { 
        '@media screen and (maxWidth: 700px)':{
            backgroundColor: 'yellow',left: open.open ? "0" : "-100%",position: 'fixed',width: '100%',display: 'flex',flexDirection: 'column',justifyContent: 'flex-start',alignItems: 'center',textAlign: 'center',height: '90vh',transition: 'left 0.3s linear'
        }
    } 

    return (       
        <nav className="navbar" style={StyleCompleted}> 
            <a className="link" href="#"> Link </a>
            <a className="link" href="#"> Link </a>
            <a className="link" href="#"> Link </a>
            <a className="link" href="#"> Link </a>                      
        </nav>
    )

}

export default Radium(Nav);

这是 app.js

import {Component,useState,React} from 'react';
import Radium,{StyleRoot} from 'radium';
import logo from './logo.svg';
import './App.css';
import Nav from './Component/Nav/Nav';
import MenuButton from './Component/Nav/MenuButton';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  render(){
    return (
      <StyleRoot>
      <div className="App">          
        <header className="App-header">
          <div className="App-header-company">
            <img className="App-logo" src={logo}  alt="logo" />
          </div>          
          <div className="App-header-btnMenu" onClick={() => this.setState({ open: !this.state.open })}>
            <MenuButton open={this.state.open} /> 
          </div>
        </header>
        <div className="content">             
          <Nav open={this.state.open} />                               
        </div>      
      </div>
      </StyleRoot>
    );
  }    
}

export default Radium(App);

所以，我想做一个导航响应，所以当@media screen 和 (maxWidth: 700px) 时，nav 会自动隐藏，所以当 se 媒体屏幕大于 700px 时，nav 工作正常但小于 700px导航不是隐藏的，所以我认为这个 const StyleCompleted = { '@media screen and (maxWidth: 700px)':{.....} } 不起作用，whue？

解决方法

我自己解决了，为此更改了这个 '

像这样：

const StyleCompleted = { 
    "@media(max-width: 700px)":{
        left: open.open ? "0" : "-100%",position: "fixed",width: "100%",display: "flex",flexDirection: "column",justifyContent: "flex-start",alignItems: "center",textAlign: "center",height: "90vh",transition: "left 0.3s linear"
    }
} 

我认为 ' 和 " 有不同的用法

哈哈，但我们有时会发生这种情况