在标签旁边创建 MUI 文本字段答案

【问题标题】：Create MUI TextField Next to Label在标签旁边创建 MUI 文本字段
【发布时间】：2021-06-01 07:02:25
【问题描述】：

我已经到处搜索了，但我无法让它工作。我想在标签旁边创建一个 TextField 元素
（而不是在 TextField 内部的任何地方或接触 TextField 的边界），如下所示： Desired Result

标签 <____> 文本字段 documentation 没有涵盖这种情况。我能得到的最好的结果是在 TextField 组件中使用 startAdornment。

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

我也尝试过，使用 FormControlLabel 组件并在 TextField 中作为 Control 传递，尽管 TextField 不能再是 fullWidth

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

但它似乎无法正常工作，我什至不确定是否应该使用带有 TextField 的 FormControlLabel。先感谢您。这似乎是非常基本的事情，但我无法让它工作，而且我没有发现其他相关问题。

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

您可以将 flex 样式应用于您的表单或将您的 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>
  );
}

这里是sandBox Example

【讨论】：