如何在react js中使用Radium

Question

我试着使用radium react 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);

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

Answer 1

我下定决心，把这个改成“为了这个”

如下所示：

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

我认为threre是‘和’之间的不同用法

一些事情，但是它有时会发生在我们身上