反応-バーガーメニューのCSSは

Question

を動作しません、私はハンバーガーメニューを使用していると私は著者のガイドのようなバーガーメニューのCSSを設定することはできません。https://github.com/negomi/react-burger-menu

は、ここに私のバーガーメニューコンポーネントです：

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> 
     ); 
    } 
}; 

そして、ここで私の主成分である：

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}に解決されます。もう1つの問題は、閉じるをクリックすると、サイドバーメニューが約10または20ピクセル下にシフトしてから、左に移動します。そのシフトダウン効果を取り除く方法は？

Answer 1

あなたはタイプミスのようです。 style={styles}の代わりにstyles={styles}にする必要があります。