reactjs - Material UI 文本字段类型 ='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 属性时)