Material UI(v1.0)：TextField强制换行及多TextField列表换行最优方案

刚好我对Material UI v1.0的TextField布局有不少经验，来给你详细拆解两种场景的解决方法：

一、单个 TextField 强制换行（输入内容自动换行） #

Material UI v1的TextField默认是单行输入框，要实现内容强制换行，核心是开启它的多行模式：

只需要给TextField添加multiline属性，再配合rows（初始显示行数）或rowsMax（最大允许行数）来控制输入框的尺寸即可。开启后，输入框会渲染成原生的<textarea>，自然支持文本自动换行。

示例代码：

import TextField from '@material-ui/core/TextField';

function SingleMultilineTextField() {
  return (
    <TextField
      label="多行备注"
      multiline  // 开启多行模式，关键属性
      rows={3}   // 初始显示3行高度
      rowsMax={5}// 最多允许显示5行，超过后会出现滚动条
      defaultValue="这里的文本会自动换行显示，你输入的内容也会随宽度自动折行~"
      fullWidth  // 让输入框占满容器宽度，换行逻辑更直观
    />
  );
}

二、一组 TextField 列表实现强制换行（布局上的换行） #

如果是多个TextField组成的列表，想要实现布局层面的自动/强制换行，最优方式是用Material UI的Grid组件，它是v1里专门做响应式布局的工具，能完美适配不同屏幕尺寸的换行需求：

思路是用Grid container作为父容器，每个TextField放在Grid item中，通过设置断点属性（比如xs、sm）控制每行显示的输入框数量，超过宽度后自动换行。如果需要某个输入框强制独占一行，直接给对应的Grid item设置xs={12}即可。

示例代码：

import { Grid, TextField } from '@material-ui/core';

function TextFieldList() {
  return (
    <Grid container spacing={2}>
      {/* 小屏幕独占一行，中等屏幕及以上每行显示2个 */}
      <Grid item xs={12} sm={6}>
        <TextField label="联系人姓名" fullWidth />
      </Grid>
      <Grid item xs={12} sm={6}>
        <TextField label="联系电话" fullWidth />
      </Grid>
      {/* 强制独占一行，不管屏幕多大都换行 */}
      <Grid item xs={12}>
        <TextField 
          label="详细地址" 
          fullWidth 
          multiline 
          rows={2} 
        />
      </Grid>
      <Grid item xs={12} sm={4}>
        <TextField label="城市" fullWidth />
      </Grid>
      <Grid item xs={12} sm={4}>
        <TextField label="区县" fullWidth />
      </Grid>
      <Grid item xs={12} sm={4}>
        <TextField label="邮编" fullWidth />
      </Grid>
    </Grid>
  );
}

补充说明 #

• 如果不需要响应式，只是想让所有TextField都强制独占一行，也可以给每个TextField设置style={{ display: 'block', marginBottom: 16 }}，不过用Grid的方式更符合Material Design的规范，也更灵活。
• 在v1.0中，TextField没有后来版本的autoSize属性，如果需要输入框高度自动适应内容，可能需要自己监听输入内容的行数来动态调整rows值，或者用简单的CSS技巧（比如min-height配合resize: vertical）。

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