Material-UI：向 TextField 添加图标

Question

这是一个用于监控员工的项目，该项目中的第一个界面是“注册”界面，它位于“表单文本字段”内，我想将图标放在.txt文件中占位符的左侧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

您可以使用组件（ 的子组件）startAdornment的 props来设置 的开始图标：InputTextFieldTextField

<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>
)}}...

请参阅本手册