Material UI TextField 类型='search' 不显示搜索图标

Question

我是 React 新手，一直在使用 Material UI 组件。我想显示一个带有搜索图标的简单 SearchBar。这是我到目前为止所拥有的，但是当我开始输入时没有显示清晰的图标。（使用 Chrome）

           <TextField
                type="search"
                variant="outlined"
                margin="normal"
                InputProps={{
                    startAdornment: (
                        <InputAdornment position="start">
                            <SearchIcon />
                        </InputAdornment>
                    ),
                }}
            />

我错过了什么？如何限制用户输入只能输入数字？

Answer 1

对我有用，请看一下this代码沙箱

下面是我对组件的完整实现

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

function App() {
  return (
    <div className="App">
      <TextField
        type="search"
        variant="outlined"
        margin="normal"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <SearchIcon />
            </InputAdornment>
          )
        }}
      />
    </div>
  );
}

PS：清除图标仅在组件不受控制时出现（即当您不向其传递 value 属性时）

Material UI TextField 类型='search' 不显示搜索图标

Material UI TextField type='search' not showing search icon

textfield

reactjs

material-ui