Material-UI TextField outlined下multiline与rows属性不生效

常见问题诱因 #

• 本地与沙箱环境的依赖版本不一致
  首先核对项目本地安装的@material-ui/core版本与CodeSandbox沙箱使用的版本是否完全一致。MUI 4.x版本在4.11.0之前存在已知bug：outlined变体下的多行Input会错误继承单行Input的固定高度，导致rows属性配置失效，旧版本即使写对配置也无法正常渲染多行高度。
• 自定义样式的选择器适配错误
  当前代码中withStyles配置的选择器'& .MuiOutlinedInput-root > .MuiInputBase-input'使用了直接子选择器>，在MUI实际渲染的DOM结构中，多行模式下的textarea元素与root节点的嵌套层级存在版本差异，直接子选择器无法稳定匹配。
  同时如果项目内存在全局样式给所有textarea元素设置了固定单行高度（比如统一设置height: 1.2em），会直接覆盖MUI为多行Input计算的自适应高度规则，导致rows配置不生效。
• CSS注入顺序冲突
  CodeSandbox环境中MUI动态生成的样式会默认在所有页面样式的最后加载，优先级最高；但本地项目中如果存在Bootstrap、Ant Design等其他UI库的全局reset样式，在MUI的样式之后注入，就会覆盖MUI为多行元素设置的height: auto规则，造成高度被压缩为单行高度。
  快速定位方法：打开浏览器开发者工具，选中渲染后的多行textarea元素，在Computed计算样式面板中查看height属性的来源，直接定位覆盖高度的冲突CSS规则。

问题修正方案 #

• 调整样式选择器，去掉直接子选择器限制，兼容单行、多行两种输入场景，同时兜底给多行Input容器设置高度自适应规则：

  const StyledTextArea = withStyles({
    root: {
      '& .MuiOutlinedInput-input': {
        fontSize: 13,
      },
      '& .MuiOutlinedInput-multiline': {
        height: 'auto',
      }
    },
  })(TextField);
  

• 调整内联样式的传递位置，避免根元素的样式干扰输入层渲染，将背景、圆角样式通过InputProps传递给输入框容器：

  <StyledTextArea
    id="outlined-multiline-static"
    label="Multiline"
    multiline
    rows={4}
    defaultValue="Default Value"
    variant="outlined"
    style={{ width: '100%' }}
    InputProps={{
      style: {
        background: '#fff',
        borderRadius: 5,
      }
    }}
  />
  

注意：排查过程中不要手动给传入TextField的style属性添加固定height值，会直接覆盖rows属性的计算结果。

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