Material-UI：向TextField添加图标

Question

这是一个监控员工的项目，该项目的第一个界面是注册界面，它位于表单文本字段内，我想在 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="[e-mail]"
                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>
  );
}

- user14510391

---

请参见以下代码示例：https://codesandbox.io/s/bold-leakey-7k2ep - gaitat

Answer 1

您可以使用Input组件（TextField的子组件）的startAdornment属性来设置TextField的起始图标：

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

- NearHuscarl

---

正是我所希望能够做到的，谢谢！我使用了这种方法，但是使用了endAdornment来切换密码字段的可见性。 - amota

Answer 2

由于TextField是由FormControl、InputLabel、Input和FormHelperText组成的，因此您应该修改嵌套的Input。 Input组件接受startAdornment属性，而TextField接受将转发到Input的InputProps属性。 所以，解决方案是

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

查看此手册

- boonya