2016-10-30 15 views
0

muithemeという属性を私のcomponent.Alsoに追加しても、正確に何が必要なのか分かりません。誰かが実装を学ぶのに最適なリソースを提案できるなら、キャッチされない例外TypeError::(...)未定義のプロパティ 'prepareStyles' を読み取ることができません**muiTheme`が「ツールバー」に指定されていません

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

}}

がエラーでmaterial ui

答えて

1

これはちょっと違った働きをしています。
あなたのアプリでテーマを提供する最も速く/適切な方法は、上位コンポーネントのMuiThemeProviderです。アプリのルートにあるはずです。

詳細については、こちらのセクションをご覧ください。
http://www.material-ui.com/#/get-started/usageドキュメントから

例:

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') 
); 
関連する問題