我正在使用material ui。我想在输入字段中显示search icon,如图所示我正在使用this APIHere是我的代码我可以显示TextField,但我不能添加搜索图标。您能添加如何添加吗?
search icon
TextField
<TextField id="standard-bare" defaultValue="Bare" margin="normal" />
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> ) }} />
下面是一个演示:第一次
u0sqgete2#
您只需要导入inputAdormentimport InputAdornment from '@material-ui/core/InputAdornment';然后像这样将InputProps添加到textField
import InputAdornment from '@material-ui/core/InputAdornment';
InputProps={{ endAdornment: ( <InputAdornment position="start"> <SearchIcon /> </InputAdornment> ) }}
请查找附件中的img,以便演示您所需的解决方案。
u4dcyp6a3#
在我的例子中,我只使用了IconButton
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> ), }} />
3条答案
按热度按时间iq3niunx1#
您需要使用输入装饰。
例如:
下面是一个演示:
第一次
u0sqgete2#
您只需要导入inputAdorment
import InputAdornment from '@material-ui/core/InputAdornment';
然后像这样将InputProps添加到textField
请查找附件中的img,以便演示您所需的解决方案。
u4dcyp6a3#
在我的例子中,我只使用了
IconButton
我例子: