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

Question

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

例如:

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

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

我想实现的是:

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

Answer 1

可以通过使用flex and order properties of CSS来实现，轻巧有效。

结果:

完整代码示例:

代码片段:

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"
    />
  );
};

希望能帮到你!