TypeError：无法在AppBar中读取未定义的属性“prepareStyles”

Question

我从这个模板（https://github.com/rafaelhz/react-material-admin-template）采取这个侧导航栏。该代码如下 -

import React, { PropTypes } from 'react';
import { Link } from 'react-router-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import Menu from 'material-ui/svg-icons/navigation/menu';  
import ViewModule from 'material-ui/svg-icons/action/view-module';
import { white } from 'material-ui/styles/colors';
import SearchBox from './searchBar';

class Header extends React.Component {
render() {
    const { styles, handleChangeRequestNavDrawer } = this.props;

    const style = {
        appBar: {
            position: 'fixed',
            top: 0,
            overflow: 'hidden',
            maxHeight: 57
        },
        menuButton: {
            marginLeft: 10
        },
        iconsRightContainer: {
            marginLeft: 20
        }
    };

    return (
        <div>
                <AppBar
                    style={{ ...styles, ...style.appBar }}
                    title={
                        <SearchBox />
                    }
                    iconElementLeft={
                        <IconButton style={style.menuButton} onClick={handleChangeRequestNavDrawer}>
                            <Menu color={white} />
                        </IconButton>
                    }
                    iconElementRight={
                        <div style={style.iconsRightContainer}>
                            <IconMenu color={white}
                                iconButtonElement={
                                    <IconButton><ViewModule color={white} /></IconButton>
                                }
                                targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                                anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
                            >
                                <MenuItem key={1} primaryText="Application 1" />
                                <MenuItem key={2} primaryText="Application 2" />
                                <MenuItem key={3} primaryText="Application 3" />
                            </IconMenu>
                            <IconMenu color={white}
                                iconButtonElement={
                                    <IconButton><MoreVertIcon color={white} /></IconButton>
                                }
                                targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                                anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
                            >
                                <MenuItem primaryText="Sign out" containerElement={<Link to="/login" />} />
                            </IconMenu>
                        </div>
                    }
                />
        </div>
    );
}
} export default Header;

---

但我得到这个错误 -

AppBar.render
G:/backend-ui-v1/node_modules/material-ui/AppBar/AppBar.js:186
183 |     zDepth = _props.zDepth,
184 |     children = _props.children,
185 |     other = (0, _objectWithoutProperties3.default)(_props, ['title', 'titleStyle', 'iconStyleLeft', 'iconStyleRight', 'onTitleClick', 'showMenuIconButton', 'iconElementLeft', 'iconElementRight', 'iconClassNameLeft', 'iconClassNameRight', 'onLeftIconButtonClick', 'onRightIconButtonClick', 'className', 'style', 'zDepth', 'children']);
> 186 | var prepareStyles = this.context.muiTheme.prepareStyles;
187 | 
188 | var styles = getStyles(this.props, this.context);

我尝试使用这个解决方案（TypeError: Cannot read property 'prepareStyles' of undefined），但如果我将组件包装在MuiThemeProvider标签中，它会显示另一个错误。

Answer 1

你需要像MuiThemeProvider一样用你的组件包装你的组件：https://github.com/rafaelhz/react-material-admin-template/blob/master/src/containers/App.js#L45

它将提供缺少的背景。