在material-ui中，如何在AppBar中向中心输入文本？

Question

我使用material-ui (app-bar-docs)定义了一个app bar，它包含一个 可用于向其添加内容的children属性（文档提及类似标签的内容可以添加到appbar中）。但是，我希望在Appbar中输入一个文本输入，但是在iconelementright后，它会在右边结束，如何将其返回到中心？ 这是代码：

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>);
  }
}

这就是它的样子：