Sai Ram Sai Ram - 1 year ago 276
React JSX Question

muiTheme` was not specified in `Toolbar`

I am unable to figure out what exactly is needed even though I added the attribute

in my component.Also it would be great if someone can suggest what is best resource for learning the implementation of
material ui

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';
import RaisedButton from 'material-ui/RaisedButton';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';

class ToolbarExamplesSimple extends React.Component {

constructor(props) {
this.state = {
value: 3,

// handleChange = (event, index, value) => this.setState({value});

render() {
const muiTheme = getMuiTheme({

appBar: {
height: 50,
return (
<Toolbar muiTheme={muiTheme}>
<ToolbarGroup firstChild={true}>
<DropDownMenu value={this.state.value} >
<MenuItem value={1} primaryText="All Broadcasts" />
<MenuItem value={2} primaryText="All Voice" />
<MenuItem value={3} primaryText="All Text" />
<MenuItem value={4} primaryText="Complete Voice" />
<MenuItem value={5} primaryText="Complete Text" />
<MenuItem value={6} primaryText="Active Voice" />
<MenuItem value={7} primaryText="Active Text" />
<ToolbarTitle text="Options" />
<FontIcon className="muidocs-icon-custom-sort" />
<ToolbarSeparator />
<RaisedButton label="Create Broadcast" primary={true} />
<IconButton touch={true}>
<NavigationExpandMoreIcon />
<MenuItem primaryText="Download" />
<MenuItem primaryText="More Info" />


Error: uncaught TypeError: Cannot read property 'prepareStyles' of undefined(…)**

Answer Source

So, it works a bit differently..
The quickest/proper way to provide the theme in your app is with the high order component MuiThemeProvider. It should be in the root of your app..

Check this section of the docs with more information

Example from the docs:

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
import myMaterialTheme from './myMaterialTheme.js';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const muiTheme = getMuiTheme(myMaterialTheme);
const App = () => (
  <MuiThemeProvider  muiTheme={muiTheme}>
    <MyAwesomeReactComponent />

  <App />,
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download