https://i.stack.imgur.com/E85yj.png
Utilizing Material-UI's TextField, I have an Icon embedded within. The issue arises when the label "Your good name here" overlaps the icon instead of being placed beside it.
This problem emerged after I included
InputLabelProps={{ shrink: false }}TextField.
Seeking advice on how to properly adjust the position?
Thank you for any assistance provided! =)
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import FormControl from "@material-ui/core/FormControl";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import AccountCircle from "@material-ui/icons/AccountCircle";
const useStyles = makeStyles((theme) => ({
margin: {
margin: theme.spacing(1)
}
}));
export default function InputWithIcon() {
const classes = useStyles();
return (
<div>
<TextField
className={classes.margin}
id="input-with-icon-textfield"
label="Your good name here"
InputLabelProps={{ shrink: false }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
)
}}
/>
<TextField
className={classes.margin}
id="input-with-icon-textfield"
label="Your good name here"
// InputLabelProps={{ shrink: false }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
)
}}
/>
</div>
);
}