0

I'm trying to give style using radium react js, and it don't work

this's 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;   
}

this is 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);

this's 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);

so, I want to do a nav responsive, so when @media screen and (maxWidth: 700px), nav is going to hide automatically, so when se media screen is greater than 700px, nav is working perfectly but less than 700px nav is not hideen, so I think that this const StyleCompleted = { '@media screen and (maxWidth: 700px)':{.....} } is not working, whue?

4

1 回答 1

0

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

像这样：

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

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

哈哈，但它有时发生在我们身上

于 2021-02-19T16:54:33.687 回答