How to add search bar in AppBar of material-ui?

Question

I want to implement Search bar in the center of App bar of material-ui. I have tried all possible ways and I have referred this code snippet , but can't find a solution for it.

My code snippet is

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

It will be helpful if I get any solution for it.

Solution 1

You can use children property to add any node in AppBar, like this:

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

Use styling on input field, check the working codesandbox.

Solution 2

you can add a ToolBar contains a Textfield you can check documentation ,this is a Demo

Comments

[Thananjaya S]

Sir, adding children renders input field on the right side. How to make it in center of the appBar.

[Thomas Fauskanger]

I don't think this works for the @material-ui/core > 1.0, depending on your styles. Adding {flex: 1} to the style of preceding child (e.g. Title) should push the input-field to the right.