methis methis - 1 month ago 12
React JSX Question

react-burger-menu css does not work

I'm using burger-menu and i can't set CSS for the burger menu like the author guide: https://github.com/negomi/react-burger-menu

Here's my burger menu component:

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


And here is my main component:

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


All of the css from variable styles does not work.

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?

Answer

Seems like you have a typo. It should be styles={styles} instead of style={styles}.

Comments