My react-autosuggest css have a problem!

[zhangwei900808]

import React from 'react'
import {withStyles} from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import classNames from 'classnames';
import Toolbar from 'material-ui/Toolbar';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import Typography from 'material-ui/Typography';
import SearchIcon from 'material-ui-icons/Search'
import Avatar from 'material-ui/Avatar';
import Button from 'material-ui/Button';
import Notification from 'material-ui-icons/Notifications'
import Apps from 'material-ui-icons/Apps'
import Autosuggest from 'react-autosuggest';

import {withRouter} from 'react-router-dom'

import {connect} from 'react-redux';
import {logout,toggleSideBar} from '../../actions'

// Imagine you have a list of languages that you'd like to autosuggest.
const languages = [
    {
        name: 'C',
        year: 1972
    },
    {
        name: 'Elm',
        year: 2012
    }
];

// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = value => {
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;

    return inputLength === 0 ? [] : languages.filter(lang =>
            lang.name.toLowerCase().slice(0, inputLength) === inputValue
        );
};

// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;

// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
    <div>
        {suggestion.name}
    </div>
);

class Topbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            suggestions: []
        }
    }

    componentWillMount() {

    }

    login = () => {
        this.props.history.push('/account/login')
    };
    quit = () => {
        this.props.logout();
    };
    handleDrawerOpen=()=>{
        this.props.toggleSideBar();
    };
    onChange = (event, { newValue }) => {
        this.setState({
            value: newValue
        });
    };

    // Autosuggest will call this function every time you need to update suggestions.
    // You already implemented this logic above, so just use it.
    onSuggestionsFetchRequested = ({ value }) => {
        this.setState({
            suggestions: getSuggestions(value)
        });
    };

    // Autosuggest will call this function every time you need to clear suggestions.
    onSuggestionsClearRequested = () => {
        this.setState({
            suggestions: []
        });
    };

    render() {
        const {classes,authenticated} = this.props;
        const { value, suggestions } = this.state;
        const inputProps = {
            placeholder: 'Type a programming language',
            value,
            onChange: this.onChange
        };
        return (
            <AppBar className={classNames(classes.appBar)} classes={{
                root: classes.appBarRoot
            }}>
                <Toolbar disableGutters classes={{
                    root: classes.toolbarRoot
                }}>
                    <div className={classes.topBarLeft}>
                        <IconButton
                            color="contrast"
                            aria-label="open drawer"
                            onClick={this.handleDrawerOpen}
                            className={classNames(classes.menuButton)}
                        >
                            <MenuIcon />
                        </IconButton>
                        <img className={classes.logoImg} src={require('../../../images/awbeci-logo.png')} width={25}
                             height={25}/>
                        <Typography type="title" color="inherit" noWrap>
                            Awbeci
                        </Typography>
                    </div>
                    <div className={classes.flexCenter}>
                        { this.props.showSearchBar &&
                        <Autosuggest
                            suggestions={suggestions}
                            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                            getSuggestionValue={getSuggestionValue}
                            renderSuggestion={renderSuggestion}
                            inputProps={inputProps}
                        />
                        }
                    </div>
                    <div className={classes.topBarRight}>
                        { !this.props.showSearchBar && <IconButton
                            color="contrast"
                            classes={{
                                root: classes.iconBtn
                            }}
                            aria-label="open drawer"
                            onClick={this.props.handleDrawerOpen}
                        >
                            <SearchIcon/>
                        </IconButton>}

                        {
                            authenticated ? (
                                    <div>
                                        <IconButton
                                            color="contrast"
                                            classes={{
                                                root: classes.iconBtn
                                            }}
                                            aria-label="应用"
                                            onClick={this.props.handleDrawerOpen}>
                                            <Apps />
                                        </IconButton>
                                        <IconButton
                                            color="contrast"
                                            classes={{
                                                root: classes.iconBtn
                                            }}
                                            aria-label="通知"
                                            onClick={this.props.handleDrawerOpen}>
                                            <Notification />
                                        </IconButton>
                                        <IconButton
                                            color="contrast"
                                            classes={{
                                                root: classes.iconBtnAvatar
                                            }}
                                            aria-label="头像"
                                            onClick={this.quit}>
                                            <Avatar alt="Remy Sharp"
                                                    src={require('../../../images/zhangwei.png')}
                                                    className={classes.avatar}/>
                                        </IconButton>
                                    </div>)
                                :
                                (<Button color="contrast"
                                         onClick={this.login}>登录</Button>)
                        }
                    </div>
                </Toolbar>
            </AppBar>
        )
    }
}
const mapStateToProps = state => {
    return {
        authenticated: state.user.authenticated,
        sideBarInfo:state.layout.sideBarInfo
    }
};

const mapDispatchToProps = (dispatch,ownProps) => {
    return {
        logout: () => {
            dispatch(logout())
        },
        toggleSideBar:()=>{
            dispatch(toggleSideBar())
        }
    }
};

const styles = theme => ({
    appBar: {
        zIndex: '1499',
        boxShadow: 'none !important'
    },
    appBarRoot: {},
    toolbarRoot: {
        [theme.breakpoints.up('sm')]: {
            minHeight: '56px'
        },
    },
    menuButton: {
        marginLeft: 12,
        marginRight: 12,
    },
    iconBtn: {
        width: 32
    },
    iconBtnAvatar: {},
    logoImg: {
        marginRight: 8
    },
    avatar: {
        width: 30,
        height: 30
    },
    flex: {
        flex: 1,
    },
    flexCenter: {
        display: 'flex',
        alignItems: 'center',
        flex: 1
    },
    input: {
        color: '#fff',
        margin: theme.spacing.unit,
    },
    topBarLeft: {
        width: 240,
        display: 'flex',
        position: 'relative',
        alignItems: 'center'
    },
    searchBar: {
        margin: '0 auto',
        width: '500px !important',
        maxWidth: 500
    },
    topBarRight: {
        minWidth: 120,
        width: 160,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        boxSizing: 'border-box',
        padding: '0 12px'
    },
    flexRight: {
        display: 'flex',
        alignItems: 'center'
    }
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Topbar)));