Question

我想在材料-ui的App栏中心实现搜索栏。我已经尝试了所有可能的方法，我已经提到了code snippet，但找不到解决方案。

我的代码段是

<div>
  <MuiThemeProvider muiTheme={muiTheme} class="navbar">
    <AppBar 
     title='Module Name' 
     onTitleClick={handleClick} 
     iconElementRight={<FlatButton label='LogOut' />}
     onClick = {handleclick}
    />
   </MuiThemeProvider>
 </div>

如果我得到任何解决方案，将会有所帮助。

Answer 1

您可以使用children属性在AppBar中添加任何节点，如下所示：

<AppBar
    title="Title"
    children= {
      <input />
    }
/>

在输入字段上使用样式，检查正常工作codesandbox。

Answer 2

你可以添加一个包含Textfield的ToolBar 您可以查看documentation，这是Demo

Answer 3

尝试一下

<AppBar>
  <Toolbar>
    <InputBase placeholder="Search for products, brands and more" />
  </Toolbar>
</AppBar>

Answer 4

在AppBar组件中传递道具

 <AppBar
    title="Title"
    showSearch= {
      <Toolbar>
        <InputBase placeholder="Search" />
      </Toolbar>
    }
/>

您可以基于AppBar道具处理customName组件，例如，如果您传递了该道具，则它应该显示Search else。

Answer 5

仅使用 Material UI

<AppBar>
    <Toolbar>
        <Input 
            type="search"
            />
    </Toolbar>
</AppBar>

您可以在此处查看 docs。

安装另一个框架。

<块引用>

npm i material-ui-search-bar

可以在主页上找到基本的代码片段。

import SearchBar from "material-ui-search-bar";
// *snip*
    
return (
    <SearchBar
        value={this.state.value}
        onChange={(newValue) => this.setState({ value: newValue })}
        onRequestSearch={() => doSomethingWith(this.state.value)}
    />
    );

您可以在此处查看 docs。

如何在材料-ui的AppBar中添加搜索栏？

5 个答案: