Как получить autoComplete/TextField закрыть заголовок в AppBar

Question

Я хочу иметь строку поиска и кнопку входа в AppBar. Строка поиска должна быть близка к названию. Таким образом, AppBar shoulb выглядит следующим образом:

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.

Как последний общий совет, если вы не сделали этого в этом случае, когда вы спросите себя что-то о материале, идите посмотреть на код. Их онлайн-документация иногда пропускает много материала по сравнению с тем, что действительно может сделать материал.