In material-ui how do i get a text input in an AppBar to the center?

问题

Iv defined an app bar using material-ui (app-bar-docs), and it includes a children attribute which can be used to add content to it (the docs mention things like tabs can be added to the appbar). However, i want to have a text input inside the Appbar, but it ends up to the right, after an iconelementright , how do i get it back to the center? here is the code:

class AppBarExampleIconButton extends React.Component {
  render() {
  return (
  <AppBar
    title={<span style={styles.title}>Title</span>}
    onTitleTouchTap={handleTouchTap}
    iconElementRight={
      <DropDownMenu >
      <MenuItem value={"1"}  primaryText="Six"/>
      <MenuItem value={"2"} primaryText="Five" />
      <MenuItem value={"3"} primaryText="four"/>
      <MenuItem value={"4"} primaryText="three"/>
      <MenuItem value={"5"} primaryText="two"/>
      <MenuItem value={"6"} primaryText="one"/>
      </DropDownMenu>
       } >
   <div key={"21"}  _grid={{x: 2, y: 1, w: 6, h: 2}} > <AutoCompleteExampleNoFilter/> </div>
  </AppBar>);
  }
}

And this is what it looks like:

来源：https://stackoverflow.com/questions/35394176/in-material-ui-how-do-i-get-a-text-input-in-an-appbar-to-the-center