Material-UI：如何在输入字段中显示搜索图标？

Question

我正在使用 材料 ui 。我想在输入字段中显示 search icon 如图所示

我正在使用 这个 API

这 是我的代码

我能够显示 TextField 但我无法添加搜索图标。请问能补充一下怎么加吗？

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

原文由 user944513 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要使用 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>
    )
  }}
/>

这是一个演示：

 const {
  TextField,
  InputAdornment,
  IconButton,
  SearchIcon,
  Icon
} = window['material-ui'];

class App extends React.Component {
  render() {
    return (
      <TextField
        label="With normal TextField"
        InputProps={{
          endAdornment: (
            <InputAdornment>
              <IconButton>
                <Icon>search</Icon>
              </IconButton>
            </InputAdornment>
          )
        }}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="root"></div>

原文由 mehamasum 发布，翻译遵循 CC BY-SA 4.0 许可协议