redux 材料-UI:如何显示搜索图标在输入字段中的React?

l7mqbcuq  于 2022-11-24  发布在  React
关注(0)|答案(3)|浏览(105)

我正在使用material ui。我想在输入字段中显示search icon,如图

所示
我正在使用this API
Here是我的代码
我可以显示TextField,但我不能添加搜索图标。您能添加如何添加吗?

<TextField id="standard-bare" defaultValue="Bare" margin="normal" />
iq3niunx

iq3niunx1#

您需要使用输入装饰。
例如:

// 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>
    )
  }}
/>

下面是一个演示:
第一次

u0sqgete

u0sqgete2#

您只需要导入inputAdorment
import InputAdornment from '@material-ui/core/InputAdornment';
然后像这样将InputProps添加到textField

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

请查找附件中的img,以便演示您所需的解决方案。

u4dcyp6a

u4dcyp6a3#

在我的例子中,我只使用了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>
                  ),
                }}
              />

相关问题