如何解决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"
/>
);
}
现场演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。