在标签旁边创建MUI TextField

Question

我到处都找过了，但就是找不到。我想创建一个TextField元素旁边的标签
(而不是任何地方的内部或触摸TextField的边界)像这样:预期的结果

拉贝河& lt; ____>文本框文档中没有介绍这种场景。我能得到的最好的是在TextField组件中使用start装饰品。

InputProps={{
startAdornment: (
<InputAdornment position="start">Name</InputAdornment>
)
}}

我也试过，使用FormControlLabel组件并将TextField作为控件传入，虽然TextField不能再fullWidth

<FormControlLabel
control={<TextField
variant="standard"
margin="normal"
id="tags"
helperText="service."
fullWidth
/>}
label="Start"
labelPlacement="start"
/>

但它似乎不能正常工作，我甚至不确定我是否应该使用一个FormControlLabel与一个TextField。提前谢谢你。这似乎是一些非常基本的东西，但我不能让它工作，我发现没有其他相关的问题张贴。

Answer 1

你可以给你的表单应用一个灵活的样式，或者把你的Textfield包裹在一个有InputLabel的div中，然后添加样式来匹配你想要的结果，例如:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import InputLabel from "@material-ui/core/InputLabel";
import { FormHelperText } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex"
},
TextFieldDiv: {
marginLeft: "15px"
},
labelName: {
paddingTop: "10px"
},
optionalTag: {
fontSize: "13px"
},
labelTag: {
textAlign: "right"
}
}));
export default function BasicTextFields() {
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off">
<InputLabel className={classes.labelName}>
<div className={classes.labelTag}>Name</div>{" "}
<div className={classes.optionalTag}>(optional)</div>
</InputLabel>
<div className={classes.TextFieldDiv}>
<TextField id="standard-basic" />
<FormHelperText>The service name</FormHelperText>
</div>
</form>
);
}

here a sandBox示例

Answer 2

我尝试了上述解决方案，但这些在Mui-v5中不起作用.

可以使用Grid.

<Grid container direction="row" alignItems="center" spacing={2}>
<Grid item>
<div>Label</div>
</Grid>
<Grid item>
<div>Input</div>
</Grid>
</Grid>

您可以相应地调整间距和对齐方式。