javascript - React material UI icon insdie auto complete component - Stack Overflow

admin管理员组

文章数量:1384278

All I want is to put this target icon inside the autoComplete ponent. I go through the documentation but could find a way.

In TextInput same thing can be achieved by doing this

<TextField
    className={classes.margin}
    id='input-with-icon-textfield'
    label='TextField'
    InputProps={{
        startAdornment: (
            <InputAdornment position='start'>
                <AccountCircle />
            </InputAdornment>
        )
    }}
/>

How can I add that target icon inside the autoComplete ponent? This is my code

Any help! Thanks in advance! =)

All I want is to put this target icon inside the autoComplete ponent. I go through the documentation but could find a way.

In TextInput same thing can be achieved by doing this

<TextField
    className={classes.margin}
    id='input-with-icon-textfield'
    label='TextField'
    InputProps={{
        startAdornment: (
            <InputAdornment position='start'>
                <AccountCircle />
            </InputAdornment>
        )
    }}
/>

How can I add that target icon inside the autoComplete ponent? This is my code

Any help! Thanks in advance! =)

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow edited Mar 26, 2021 at 17:40 Kareem Dabbeet 3,99433 gold badges1919 silver badges3535 bronze badges asked Mar 26, 2021 at 17:07 margherita pizzamargherita pizza 7,2272929 gold badges103103 silver badges178178 bronze badges 1

• Check out my answer of using InputAdornment. – Zunayed Shahriar Commented Mar 26, 2021 at 17:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Working solution with material's way using InputAdornment at CodeSandbox.

Demo

Edit:

Base on your new requirement we need to use style.

And I've also changed your label condition to:

label={inputValue ? "" : "Near Me..."}

New demo at CodeSandbox.

Result:

Latest:

You could use style. Something like:

...
renderInput={(params) => (
 <div>
  <GpsFixedIcon className={classes.gpsIcon} /> //<-- style for icon
  <TextField
   {...params}
   label="Add a location"
   variant="outlined"
   fullWidth
  />
 </div>
)}
...

and in useStyles:

const useStyles = makeStyles((theme) => ({
  ...
  gpsIcon: {
    position: "absolute",
    top: "3%"
  }
}));

Here your code modified.

InputAdornment works with Autoplete, you must pass the InputProps from Autoplete to the TextField.

<Autoplete
    renderInput={(params) =>
        <TextField
            {...params}
            label={'TextField'}
            InputProps={{
                ...params.InputProps,
                startAdornment: (
                    <InputAdornment position="start">
                        <AccountCircle />
                    </InputAdornment>
                ),
            }}
        />
    }
/>

本文标签： javascriptReact material UI icon insdie auto complete componentStack Overflow