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

Question

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

例如：

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

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

我想要实现的是：

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

Answer 1

可以利用CSS的属性flex来order实现，轻量级且有效。

结果：

完整代码示例：

代码片段：

const useStyles = makeStyles({
  root: {
    "& .MuiFormLabel-root": {
      display: "flex",
      alignItems: "center",
      "& .myIcon": {
        paddingLeft: "8px",
        order: 999
      }
    }
  }
});

const Demo = () => {
  const classes = useStyles();
  return (
    <TextField
      className={classes.root}
      required
      label={
        <Fragment>
          I am label
          <SettingsRounded className="myIcon" fontSize="small" />
        </Fragment>
      }
      variant="outlined"
    />
  );
};

希望能帮到你！