react-burger-menu css does not work
<p>I'm using burger-menu and i can't set CSS for the burger menu like the author guide: <a href="https://github.com/negomi/react-burger-menu" rel="nofollow">https://github.com/negomi/react-burger-menu</a></p>

<p>Here's my burger menu component:</p>

<pre><code>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 (
            &lt;div style={style} className={this.props.side}&gt;
                {this.props.children}
            &lt;/div&gt;
        );
    }
});

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 (
            &lt;MenuWrap wait={20}&gt;

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

<p>And here is my main component:</p>

<pre><code>import React from 'react';
import styles from './Main.scss';

import LeftSidebar from '../LeftSidebar/LeftSidebar'

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

<p>All of the css from variable styles does not work.</p>

<p>EDIT: the problem above is solved by change style ={styles} to styles = {styles}. The other problem is: when i click  close, the sidebar menu shift down about 10 or 20px before moving back to the left. How to remove that shift down effect?</p>