CSS를

Question

것은 내가 햄버거 메뉴를 사용하고 작동하지 않고 내가 저자 가이드 같은 햄버거 메뉴에 대한 CSS를 설정할 수 없습니다 :

import React from 'react'; 

import BurgerMenu from 'react-burger-menu'; 

import { List, ListItem, ListItemContent } from 'react-mdl'; 


var MenuWrap = React.createClass({ 

    getInitialState() { 
     return {hidden : false}; 
    }, 

    toggle() { 
     this.setState({hidden: !this.state.hidden}); 
    }, 

    render() { 

     let style; 

     if (this.state.hidden) { 
      style = {display: 'none'}; 
     } 

     return (
      <div style={style} className={this.props.side}> 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 

export default class LeftSidebar extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      currentMenu: 'push', 
      side: 'left', 
      hidden: true, 
     }; 
    }; 

    render() { 
     const Menu = BurgerMenu[this.state.currentMenu]; 
     var styles = { 
      bmBurgerButton: { 
       position: 'fixed', 
       width: '36px', 
       height: '30px', 
       left: '36px', 
       top: '36px' 
      }, 
      bmBurgerBars: { 
       background: '#373a47' 
      }, 
      bmCrossButton: { 
       height: '24px', 
       width: '24px' 
      }, 
      bmCross: { 
       background: '#bdc3c7' 
      }, 
      bmMenu: { 
       background: '#373a47', 
       padding: '2.5em 1.5em 0', 
       fontSize: '1.15em' 
      }, 
      bmMorphShape: { 
       fill: '#373a47' 
      }, 
      bmItemList: { 
       color: '#b8b7ad', 
       padding: '0.8em' 
      }, 
      bmOverlay: { 
       background: 'rgba(0, 0, 0, 0.3)' 
      } 
     }; 


     return (
      <MenuWrap wait={20}> 

       <Menu 
        style={styles} 
        noOverlay id={this.state.currentMenu} 
        pageWrapId={'page-wrap'} 
        outerContainerId={'outer-container'} 
       > 
        {console.log(Menu)} 
        <List> 
         <ListItem> 
          <ListItemContent icon="person">Dashboard</ListItemContent> 
         </ListItem> 
         <ListItem> 
          <ListItemContent icon="person">Community</ListItemContent> 
         </ListItem> 
         <ListItem> 
          <ListItemContent icon="person">About</ListItemContent> 
         </ListItem> 
        </List> 
       </Menu> 
      </MenuWrap> 
     ); 
    } 
}; 

: 여기 https://github.com/negomi/react-burger-menu

나의 햄버거 메뉴 구성 요소의 변수 스타일에서

import React from 'react'; 
import styles from './Main.scss'; 

import LeftSidebar from '../LeftSidebar/LeftSidebar' 

export default class Program extends React.Component { 
    render() { 
     return (
     <div id="outer-container" style={{height: '100%'}}> 
     <LeftSidebar /> 
     <div id="page-wrap"> 
      <p>Content</p> 
     </div> 
     </div> 
    ); 
    } 
    } 

모든 CSS의이 작동하지 않습니다

그리고 여기 내 주요 구성 요소입니다.

EDIT : 위의 문제는 change style = {styles}에서 styles = {styles}로 해결됩니다. 다른 문제는 다음과 같습니다. 닫기를 클릭하면 사이드 바 메뉴가 약 10 또는 20 픽셀 아래로 이동 한 후 왼쪽으로 돌아갑니다. 그 shift down 효과를 제거하는 방법?

Answer 1

오타가있는 것 같습니다. style={styles} 대신 styles={styles}이어야합니다.