Material-UI：向 TextField 添加圖標

Question

這是一個監控員工的項目，這個項目的第一個界面是 Sign Up 界面，它位於 Form Text Field 里面，我想把 icon 放在TextField中占位符的左邊。 我嘗試了不止一種方法，但我的嘗試都失敗了。 我怎樣才能做到這一點？ 在這個文件中，我添加了表單，只添加了一個圖標SignUp.tsx ：

import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button"
import DraftsOutlinedIcon from '@material-ui/icons/DraftsOutlined';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
      width: "100%",
      marginTop: "10rem",
    },
    paper: {
      margin: "auto",
      padding: "2rem",
      maxWidth: "30%",
      paddingLeft: "4rem",
      paddingRight: "4rem",
    },

    textField: {
      width: "100%",
      paddingTop: "0.5rem",
    },

    title: {
      fontSize: "1.5rem",
    }, 

    button:{
      height: "3.8rem",
      backgroundColor: "#5f48ea",
      color: "#fff",
      textTransform: "capitalize",
      fontSize: "1.3rem",
      marginTop: "0.8rem",
      marginBottom: "2.5rem"
    }
  })
);

export default function SignUp() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container direction={"column"}>
          <Grid item>
            <Typography component="div">
              <Box textAlign="center" className={classes.title} m={1}>
                <h1>Let's go!</h1>
              </Box>
            </Typography>
          </Grid>
          <Grid md={12} container direction={"column"} spacing={4}>
            <Grid item md={12} xs={12}>
              <label>Full Name</label>
              <TextField
                className={classes.textField}
                placeholder="George Dawod"
                variant="outlined"
              />
            </Grid>
            <Grid item xs={12} md={12}  style={{position: 'relative', display: 'inline-block'}}>
              <label>Email</label>
              
              <TextField
                className={classes.textField}
                placeholder="example@site.com"
                variant="outlined"
              />
            </Grid>
            <Grid item xs={12} md={12}>
              <label>Choose Password</label>
              <TextField
                className={classes.textField}
                placeholder="password"
                variant="outlined"
              />
            </Grid>
            <Grid item>
              <Button className={ classes.button }  fullWidth variant="contained"> 
                play with Slark
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

Answer 1

您可以使用Input組件（ TextField的子組件）的startAdornment道具來設置TextField的開始圖標：

<TextField
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <DraftsOutlinedIcon />
      </InputAdornment>
    ),
  }}
/>

Answer 2

因為TextField是FormControl 、 InputLabel 、 Input和FormHelperText的組合，你應該修改你的嵌套Input 。 Input組件接受startAdornment屬性， TextField接受InputProps屬性，該屬性將被轉發到您的Input 。 所以，解決方案是

<TextField InputProps={{startAdornment: (
    <InputAdornment position="start">
      <IconComponent />
    </InputAdornment>
)}}...

請參閱本手冊