如何在AppBar中獲取autoComplete/TextField關閉標題

Question

我想在AppBar中有一個搜索欄和登錄按鈕。搜索欄應該靠近他的標題。因此，AppBar遵循這樣的順序：

Title SearchBox   LoginButton 

我應該怎麼做？這是代碼：

import React from 'react' 
import AppBar from 'material-ui/lib/app-bar' 
import FlatButton from 'material-ui/lib/flat-button' 
import BarAutoComplete from './auto-complete' 

const styles={ 
    title:{ 
    cursor:'pointer', 
    }, 

} 

const AppBarExample=()=>(
    <AppBar  
     title={<span style={styles.title}>Title</span>} 
     children={<div><BarAutoComplete/><FlatButton label="Search" /></div>} 

     iconElementRight={<FlatButton label="Login" />} 
     /> 

    ) 
export default AppBarExample 

使用此代碼，搜索欄位於登錄按鈕之後。 這是一個similar question感謝

Answer 1

這是因爲它的AppBar的編碼方式，你可以看看源代碼在這裏：https://github.com/callemall/material-ui/blob/master/src/app-bar.jsx#L329-L332

這樣的解決方案可能是反轉的元素，並設置搜索酒吧作爲iconElementRight和登錄按鈕作爲children，但遺憾的是名稱和the code建議iconElementRight只適用於圖標或平面按鈕。別的什麼都行不通。

我認爲你可以做的唯一的事情就是在GitHub上創建一個問題，要求他們改進AppBar。

作爲最後的一般性建議，如果您在這種情況下沒有做到這一點，那麼當您問自己一些關於material-ui的內容時，請查看代碼。他們的在線文檔有時會缺少很多東西，而與用戶可以做的材料相比較。