React结合Material-UI构建表单：如何将标签置于输入框侧方？

当然可以实现这种标签在输入框侧方的布局！Material-UI虽然默认的TextField组件是浮动标签的设计（符合Material Design规范），但通过组合它的内置布局组件，完全能轻松搞定你想要的“name [输入框]”这种排版，不用从零搭建组件。下面是几个实用的方案：

1. 使用Grid系统（最灵活的方式） #

Grid是Material-UI里用来做响应式布局的核心组件，用它来控制标签和输入框的宽度比例非常方便，还能保证在不同屏幕尺寸下的适配性。

示例代码：

import { Grid, TextField, Typography } from '@mui/material';

// 表单中的某一行
<Grid container spacing={2} alignItems="center" marginBottom={2}>
  {/* 标签区域，占3份宽度 */}
  <Grid item xs={3}>
    <Typography variant="body1" fontWeight="medium">Name</Typography>
  </Grid>
  {/* 输入框区域，占9份宽度 */}
  <Grid item xs={9}>
    <TextField 
      fullWidth 
      variant="outlined" 
      placeholder="请输入姓名" 
    />
  </Grid>
</Grid>

<Grid container spacing={2} alignItems="center" marginBottom={2}>
  <Grid item xs={3}>
    <Typography variant="body1" fontWeight="medium">Title</Typography>
  </Grid>
  <Grid item xs={9}>
    <TextField 
      fullWidth 
      variant="outlined" 
      placeholder="请输入职位" 
    />
  </Grid>
</Grid>

这里通过xs={3}和xs={9}控制标签和输入框的宽度比例，alignItems="center"能让标签和输入框垂直居中，排版非常整齐。

2. 使用Box做Flex布局（更简洁的写法） #

如果你不需要响应式的宽度比例，只是简单的并排布局，用Box组件的flex属性会更简洁：

示例代码：

import { Box, TextField, InputLabel } from '@mui/material';

<Box display="flex" alignItems="center" gap={2} marginBottom={2}>
  <InputLabel>Name</InputLabel>
  <TextField variant="outlined" />
</Box>

<Box display="flex" alignItems="center" gap={2} marginBottom={2}>
  <InputLabel>Title</InputLabel>
  <TextField variant="outlined" />
</Box>

display="flex"让子元素并排，gap={2}控制标签和输入框的间距，alignItems="center"保证垂直居中，代码量更少。

3. 封装自定义组件（复用性更高） #

如果你的表单里有很多这种侧方标签的输入框，建议封装一个自定义组件，避免重复代码：

import { Grid, TextField, Typography } from '@mui/material';

const SideLabelTextField = ({ label, ...restProps }) => {
  return (
    <Grid container spacing={2} alignItems="center" marginBottom={2}>
      <Grid item xs={3}>
        <Typography variant="body1" fontWeight="medium">{label}</Typography>
      </Grid>
      <Grid item xs={9}>
        <TextField fullWidth variant="outlined" {...restProps} />
      </Grid>
    </Grid>
  );
};

// 使用时只需传入标签和其他TextField的属性
<SideLabelTextField label="Name" placeholder="请输入姓名" />
<SideLabelTextField label="Title" placeholder="请输入职位" />

这样每次使用只需要一行代码，维护起来也更方便。

其实Material-UI的设计理念就是通过组件组合来适配不同的场景，这种侧方标签的布局虽然不是TextField的默认样式，但通过内置的布局组件就能轻松实现，完全满足你的可读性需求。

内容的提问来源于stack exchange，提问作者dcsan