Sai Ram Sai Ram - 1 month ago 18
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

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


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) {
super(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" />
</DropDownMenu>
</ToolbarGroup>
<ToolbarGroup>
<ToolbarTitle text="Options" />
<FontIcon className="muidocs-icon-custom-sort" />
<ToolbarSeparator />
<RaisedButton label="Create Broadcast" primary={true} />
<IconMenu
iconButtonElement={
<IconButton touch={true}>
<NavigationExpandMoreIcon />
</IconButton>
}
>
<MenuItem primaryText="Download" />
<MenuItem primaryText="More Info" />
</IconMenu>
</ToolbarGroup>
</Toolbar>
);


}
}

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

Answer

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
http://www.material-ui.com/#/get-started/usage.

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

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
Comments