2016-10-30 13 views
0

Ich kann nicht herausfinden, was genau benötigt wird, obwohl ich das Attribut muitheme in meiner Komponente hinzugefügt habe.Auch wäre es großartig, wenn jemand vorschlagen könnte, was die beste Ressource für das Lernen der Implementierung ist von material ui in meteor-reactmuiTheme` wurde nicht in `Toolbar` angegeben

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

} }

Fehler: abgefangene Typeerror: kann Eigenschaft 'prepareStyles' undefinierter lesen (...) **

Antwort

1

So, es funktioniert ein bisschen anders ..
Der schnellste/richtige Weg, um das Thema in Ihrer App zur Verfügung zu stellen, ist mit der hochwertigen Komponente MuiThemeProvider. Es sollte in der Wurzel Ihrer App sein.

Überprüfen Sie diesen Abschnitt der Dokumentation mit weiteren Informationen
http://www.material-ui.com/#/get-started/usage.

Beispiel der Dokumente:

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') 
); 
Verwandte Themen