Material-UI:如何在react中的输入字段中显示搜索图标?

IT技术 reactjs redux material-ui
2021-05-23 13:04:32

我正在使用材料 ui我想search icon在输入字段中显示,如图所示 在此处输入图片说明

我正在使用这个 API

是我的代码

我可以显示,TextField但无法添加搜索图标。你能添加如何添加吗?

 <TextField id="standard-bare" defaultValue="Bare" margin="normal" />
3个回答

您需要使用Input Adornments

例如:

// imports
import IconButton from "@material-ui/core/IconButton";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search";

// render

<TextField
  label="With normal TextField"
  InputProps={{
    endAdornment: (
      <InputAdornment>
        <IconButton>
          <SearchIcon />
        </IconButton>
      </InputAdornment>
    )
  }}
/>

这是一个演示:

您只需要导入 inputAdornment

import InputAdornment from '@material-ui/core/InputAdornment';

并像这样将 InputProps 添加到 textField

InputProps={{
  endAdornment: (
    <InputAdornment position="start">
      <SearchIcon />
    </InputAdornment>
   )
  }}

请找到随附的 img 以演示您所需的解决方案。

在此处输入图片说明

就我而言,我只使用了 IconButton

import {  TextField, IconButton } from '@material-ui/core';

import { SearchOutlined } from '@material-ui/icons';

我的例子:

             <TextField
                fullWidth
                id="standard-bare"
                variant="outlined"
                defaultValue="How can we help"
                InputProps={{
                  endAdornment: (
                    <IconButton>
                      <SearchOutlined />
                    </IconButton>
                  ),
                }}
              />


           

在此处输入图片说明