無法對齊AppBar中的項目

Question

我很難對齊我的AppBar中的某些元素。我需要的是​​到右邊，所有的元素之後，但在孩子們面前總是顯示：

這裏是我的代碼：

export default class MainMenu extends React.Component { 
    render() { 
     return (
      <AppBar title="Dashboard" iconElementRight={ 
       <IconMenu 
        iconButtonElement={ 
         <IconButton><MoreVertIcon /></IconButton> 
        } 
        targetOrigin={{horizontal: 'right', vertical: 'top'}} 
        anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
       > 
        <MenuItem primaryText="Refresh" /> 
        <MenuItem primaryText="Help" /> 
        <MenuItem primaryText="Sign out" /> 
       </IconMenu> 
      }> 
       <FlatButton label="Foo" style={styles.items}/> 
       <FlatButton label="Bar" style={styles.items}/> 
      </AppBar> 
     ); 
    } 
} 

Answer 1

我剛剛作出了一個組件，用於所有的右手的東西是這樣的：

var RightSideStuff = React.createClass({ 
    render() { 
    return (
     <span> 
      <FlatButton label="Foo" style={styles.items}/> 
      <FlatButton label="Bar" style={styles.items}/> 

      <IconMenu 
       iconButtonElement={ 
        <IconButton><MoreVertIcon /></IconButton> 
       } 
       targetOrigin={{horizontal: 'right', vertical: 'top'}} 
       anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
      > 
       <MenuItem primaryText="Refresh" /> 
       <MenuItem primaryText="Help" /> 
       <MenuItem primaryText="Sign out" /> 
      </IconMenu> 
     </span> 
    ); 

} 

}）;

然後包含到原來的分量：

<AppBar title="Dashboard" 
      iconElementRight={<RightSideStuff/>} 
      style={styles.appbar} 
    /> 

這讓appubar顯示所有的東西作爲一個羣體，而不是瀏覽器採取控制和爲了渲染的東西。