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都不起作用。

编辑：上面的问题通过将style = {styles}更改为styles = {styles}来解决。另一个问题是：当我点击关闭时，侧边栏菜单向下移动大约10或20px，然后再向左移动。如何消除这种降档效应？

Answer 1

好像你有一个错字。它应该是styles={styles}而不是style={styles}。

react-burger-menu css不起作用

1 个答案: