Material UI 多行TextField输入新行时无法自动扩展如何解决

TextField组件开启multiline属性后本就内置随输入内容自动调整高度的能力，你遇到的高度锁死问题，对应以下三类场景修复即可：

• 样式冲突（最高发场景）
  检查项目全局样式、父容器样式，是否存在对textarea标签写死固定height、max-height属性，或是设置了非overflow:hidden的溢出样式。MUI的自适应逻辑是通过动态修改textarea行内height值实现的，若外部样式优先级高于行内样式，会直接导致自适应失效。
  可先通过组件内联样式做验证，若加完下述样式自适应恢复，删除冲突的外部样式即可：

  <TextField
    sx={{
      "& textarea": {
        height: "auto !important",
        overflow: "hidden"
      }
    }}
    multiline
    fullWidth
    id="standard-textarea"
    label="Method"
    value={mealmethod}
    name="mealmethod"
    // 文本域事件优先取e.target.value，避免事件冒泡导致取值异常
    onChange={e => setMethod(e.target.value)}
    minRows={2}
    maxRows={4}
    variant="outlined"
  />
  

  修复后效果为：内容不足2行时保持2行高度，内容超过2行逐行增高，内容超过4行后停止增高、出现滚动条。
• MUI版本属性不兼容
  如果你使用的是MUI v4及更早版本，自适应逻辑的属性名和v5+不同：v4版本不识别minRows、maxRows属性，需要替换为rows（最小/默认行数）、rowsMax（最大行数），修改后即可正常触发自适应：

  <TextField
    multiline
    fullWidth
    id="standard-textarea"
    label="Method"
    value={mealmethod}
    name="mealmethod"
    onChange={e => setMethod(e.target.value)}
    rows={2}
    rowsMax={4}
    variant="outlined"
  />
  

• 自定义输入组件导致逻辑丢失
  如果你通过InputProps自定义了底层输入组件，会覆盖MUI内置的TextareaAutosize自适应逻辑，需要手动引入自适应组件作为输入载体：

  import TextareaAutosize from '@mui/material/TextareaAutosize';
  
  <TextField
    multiline
    fullWidth
    id="standard-textarea"
    label="Method"
    value={mealmethod}
    name="mealmethod"
    onChange={e => setMethod(e.target.value)}
    variant="outlined"
    InputProps={{
      inputComponent: TextareaAutosize,
      inputProps: {
        minRows: 2,
        maxRows: 4
      }
    }}
  />
  

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