Material-UI：如何在 TextField 标签中添加图标？

问题描述

我正在尝试将 Material-UI 图标添加到 TextField 组件中，我想将其添加到不在输入字段中的标签中。

例如：

通过 Inputprops 我们可以传递和添加图标到输入，但我希望它在标签中。如何实现这一目标..？

<Field label="Name" required /> -> Name*

我想要实现的是：

<Field label="Name" required /> -> Name*(icon)

解决方法

因为 label 可以接受 ReactNode，所以您可以像这样向 TextField 添加一个图标组件：

import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Add from "@material-ui/icons/Add";

const useStyles = makeStyles({
  root: {
    "& label": {
      marginTop: -3,// fix the icon alignment issue
    }
  },label: {
    display: "inline-flex",alignItems: "center"
  }
});

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

  return (
    <TextField
      className={classes.root}
      label={
        <div className={classes.label}>
          <span>My Label</span>
          <Add />
        </div>
      }
      variant="outlined"
    />
  );
}

现场演示