如何在MUI文本域（textarea）内对齐标签与输入文本？

需求回顾 #

需要实现一个文本域组件，满足：

• 标签内嵌在文本域内部
• 输入文本从标签末尾开始
• 标签过长时自动换行
• 文本域和标签随设备宽度自适应

问题分析 #

你之前用Material-UI TextField的原生label做样式覆盖，虽然能把标签固定在文本域内，但无法让输入内容跟在标签末尾——因为原生label本质是浮动提示元素，和输入内容不在同一排版流里，强行定位会导致输入内容和标签重叠或排版混乱。

解决方案 #

改用OutlinedInput配合InputAdornment实现自定义内嵌标签，让标签和输入内容处于同一排版流，天然支持换行和自适应：

完整代码

import { useState } from 'react';
import { OutlinedInput, InputAdornment } from '@mui/material';

const CustomLabelTextarea = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <OutlinedInput
      multiline
      minRows={2}
      fullWidth
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      // 自定义内嵌标签作为起始装饰
      startAdornment={
        <InputAdornment 
          position="start" 
          sx={{
            mr: 1, // 标签和输入内容的间距
            flexWrap: 'wrap', // 标签过长自动换行
            whiteSpace: 'normal',
            fontWeight: 'bold', // 匹配期望效果的加粗样式
            color: '#000'
          }}
        >
          医疗机构/诊所/咨询中心等名称：
        </InputAdornment>
      }
      sx={{
        display: 'flex',
        alignItems: 'flex-start', // 标签和输入内容顶部对齐
        paddingTop: 1.5,
        // 配置输入内容的排版
        '& .MuiOutlinedInput-input': {
          flex: 1,
          whiteSpace: 'pre-wrap',
          wordWrap: 'break-word',
          minHeight: '1.5em', // 确保单行输入时高度匹配标签
        }
      }}
    />
  );
};

export default CustomLabelTextarea;

方案优势 #

1. 排版自然：标签和输入内容处于同一flex流中，输入内容自动从标签末尾开始，不会出现重叠或错位
2. 自适应换行：标签通过flexWrap: 'wrap'实现过长自动换行，配合fullWidth完美适配不同设备宽度
3. 无样式冲突：不需要用!important强行覆盖Material-UI原生样式，避免后续组件升级出现样式问题
4. 保留多行特性：multiline和minRows保持文本域的多行输入能力，输入内容也会自动换行

样式微调 #

如果需要调整标签的字体大小、间距或输入内容的行高，直接修改sx中的对应参数即可。

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