如何为Material UI TextField多行组件设置固定最大行数？设置maxRows={5}无效导致行数无限增加

我之前也踩过这个坑！只设置maxRows={5}确实没法限制文本框的高度无限扩展，因为Material UI的多行TextField需要同时配置初始行数（minRows或rows）和maxRows，才能让最大行数的限制真正生效，同时让超出的内容滚动而不是拉伸文本框。

下面是几种经过验证的可行方案：

方案1：固定初始行数与最大行数一致 #

把minRows和maxRows设为相同的值，这样文本框会直接渲染为5行高度，内容超出时自动出现垂直滚动条：

<TextField
  multiline
  minRows={5}
  maxRows={5}
  placeholder="请输入内容..."
/>

方案2：用rows替代minRows实现相同效果 #

如果你希望初始显示的行数和最大限制行数一致，也可以用rows属性代替minRows，效果完全相同：

<TextField
  multiline
  rows={5}
  maxRows={5}
  placeholder="请输入内容..."
/>

方案3：自定义CSS强制固定高度（应对特殊场景） #

如果遇到样式冲突导致前两种方案失效的情况，你可以通过sx属性直接给输入框的多行区域设置固定高度和滚动规则：

<TextField
  multiline
  maxRows={5}
  sx={{
    '& .MuiInputBase-inputMultiline': {
      maxHeight: '120px', // 可根据你的字体大小调整到对应5行的高度
      overflowY: 'auto',
    }
  }}
  placeholder="请输入内容..."
/>

补充说明 #

单独设置maxRows时，Material UI的组件逻辑是允许文本框从初始高度（默认1行）扩展到maxRows指定的行数，但如果没有限制初始高度的下限，有些场景下可能会出现组件继续拉伸的问题——所以同时锁定初始行数和最大行数，是最稳妥的解决方式。

内容的提问来源于stack exchange，提问作者Mathew O'Sullivan