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建议{{ 1}}仅用于图标或平面按钮。其他任何事情都无法奏效。

我认为你唯一可以做的就是在GitHub上创建一个问题，要求他们增强iconElementRight。

作为最后的一般建议，如果你在这种情况下没有这样做，当你问自己一些关于材料的事情时，请看看代码。他们的在线文档有时会遗漏很多东西，而不是什么材料 - 真的可以做到。

如何在AppBar

1 个答案: