Question

我尝试编程AppBar。很遗憾没有成功。谷歌的网络应用程序作为模板。 Google使用全尺寸菜单（以及自动折叠到侧边菜单+移动设备中的汉堡包）和搜索框来实现他们的网络应用程序。即使在互联网上搜索数小时也没有产生任何结果。谁有有没有对这样的AppBar进行编程并使其源代码可用？

我尝试了这个代码。在此示例中，代码位于/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)

Answer 1

您可以观看this教程，在材质用户界面中重新创建应用栏。

错误后更新帖子，原始海报评论

您可以按照以下模式传递主题道具：

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找到完整的代码。

带有Material-UI的AppBar

1 个答案: