Material-UI:如何在react中的输入字段中显示搜索图标?
IT技术
reactjs
redux
material-ui
2021-05-23 13:04:32
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>
)
}}
/>
这是一个演示:
就我而言,我只使用了 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>
),
}}
/>