Material-ui 搜索图标需要位于输入框右侧

Question

我希望搜索图标出现在material-ui（react）中输入框的右侧。是否需要为此添加任何课程？

这是代码片段

 import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';
  <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
          </div>

Answer 1

在

endAdornment

中使用

InputBase

：

<InputBase
  placeholder="Search…"
  inputProps={{ 'aria-label': 'search' }}
  endAdornment={<SearchIcon/>}
/>

Answer 2

代替

endAdornment

只需放置

startAdornment

就可以了。

这是我的代码作为示例

import Button from "@mui/material/Button";
import { Container, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";
import SearchIcon from "@mui/icons-material/Search";

  <div>
      <Container maxWidth="md">
        <TextField
          id="search"
          type="search"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          sx={{ width: 350 }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            )
          }}
        />
      </Container>
    </div>