TypeError: Cannot read property 'prepareStyles' of undefined in AppBar

Question

I am taking this side navigation bar from this template (https://github.com/rafaelhz/react-material-admin-template). The code for this is as follows-

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;

But I am getting this error-

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

I tried using this solution (TypeError: Cannot read property 'prepareStyles' of undefined) but it shows me another error if I wrap the component in MuiThemeProvider tag.

*but it shows me another error*, can you show that error message? — Mayank Shukla, Dec 28 '17 at 07:14
try this: import muiTheme `import getMuiTheme from 'material-ui/styles/getMuiTheme';` and then use it like this: `` — Mayank Shukla, Dec 28 '17 at 08:20
It gives me the error -Cannot read property 'baseTheme' of undefined — sugandh_g, Dec 28 '17 at 12:03

score 2 · Answer 1 · answered Dec 28 '17 at 08:19

2

You need to wrap your component with MuiThemeProvider like here: https://github.com/rafaelhz/react-material-admin-template/blob/master/src/containers/App.js#L45

It will provide missing context.

answered Dec 28 '17 at 08:19

Konrad Klimczak

1,474
2
22
44

1

It gives me the error -Cannot read property 'baseTheme' of undefined – sugandh_g Dec 28 '17 at 12:03
1

This worked for me: import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; And then wrap the entire code in : – Aarchie Sep 10 '19 at 23:21

TypeError: Cannot read property 'prepareStyles' of undefined in AppBar

1 Answers1