reactjs - material-ui的AppBar如何添加搜索栏？

Question

我想在material-ui的App bar中心实现Search bar。我已经尝试了所有可能的方法并且我已经提到了这个code snippet , 但找不到解决方案。

我的代码片段是

<div>
  <MuiThemeProvider muiTheme={muiTheme} class="navbar">
    <AppBar 
     title='Module Name' 
     onTitleClick={handleClick} 
     iconElementRight={<FlatButton label='LogOut' />}
     onClick = {handleclick}
    />
   </MuiThemeProvider>
 </div>

如果我能得到任何解决方案，那将会很有帮助。

Answer 1

您可以使用children 属性在AppBar 中添加任何节点，如下所示:

<AppBar
    title="Title"
    children= {
      <input />
    }
/>

在输入字段上使用样式，检查工作 codesandbox .