2017-10-09 36 views
0

我试图编写AppBar。可惜没有成功。 Google的网络应用程序充当模板。 Google通过全尺寸菜单(自动折叠到侧边菜单+手机汉堡包)和搜索框实现他们的网络应用。甚至在互联网上搜索几个小时也没有产生任何结果。谁有 曾编程这样一个AppBar并提供其源代码?AppBar与Material-UI

我试过这个例子的代码。在这个例子中的代码是在/src/index.js

import React, { Component } from 'react';  
import ReactDOM from 'react-dom';  
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';  
import AppBar from 'material-ui/AppBar';         
import registerServiceWorker from './registerServiceWorker';  

class App extends Component {                    
    render() {                        
    return (                        
     <MuiThemeProvider>                     
     <AppBar />                      
     </MuiThemeProvider>                     
    );                         
    };                          
};                          

ReactDOM.render(<App />, document.getElementById('root'));            
registerServiceWorker();      

这是错误消息:

bundle.js:37989 Warning: Failed prop type: The prop `theme` is marked as required in `MuiThemeProvider`, but its value is `undefined`. 
    in MuiThemeProvider (at index.js:10) 
    in App (at index.js:17) 
+0

到目前为止您尝试过什么?请给出一些代码示例。 – aydinugur

+0

你看过material-ui项目吗?他们正在使用AppBar以及崩溃行为和汉堡包。 – hazardous

回答

0

你可以看this教程重新创建反应与材料UI应用栏。

更新后的错误后,发表谈话原始的海报:

您可以通过下面的方式传递主题道具:

import getMuiTheme from 'material-ui/styles/getMuiTheme'; 

... 

const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: cyan500, 
    }, 
    appBar: { 
    height: 50, 
    }, 
}); 

... 

<MuiThemeProvider muiTheme={muiTheme}> 
    <AppBar title="My AppBar" /> 
</MuiThemeProvider> 

您可以从here找到完整的代码。

+0

请看看错误信息 – joerg