Material-UI v4给withStyles封装的InputBase传minRows、maxRows不识别报错

React does not recognize the "minRows" prop on a DOM element 报错的核心原因是：Material-UI v4 的 InputBase 组件仅在 multiline={true} 激活时，才会内部处理 minRows、maxRows 属性。如果 multiline 为 false，这两个属性会被直接透传给底层的原生 <input> DOM 元素，而原生 input 不存在这两个属性，因此触发 React 未知属性报错。
另外你自定义传递的 height 属性不属于 InputBase 的官方属性，同样会被透传到 DOM 元素，也可能触发同类报错。

• 方案1：条件传递多行专属属性
  仅当 multiline 为 true 时才传入 minRows、maxRows，修改 CustomTextField 内的 CustomInput 调用逻辑：

export const CustomTextField = (props) => {
  // 原有业务逻辑

  return (
        <FormControl fullWidth >
            <CustomInput
                id={id}
                fullWidth
                onChange={e => onChange(e)}
                value={value}
                variant={'outlined'}
                disabled={disabled}
                name={name}
                height={height}
                multiline={multiline}
                {/* 仅多行模式下传递行控制属性 */}
                {...(multiline ? {minRows: 3, maxRows: 10} : {})}
            />
        </FormControl>
  );
}

• 方案2：过滤自定义样式属性
  如果你传递的 height 是用于自定义样式的专属属性，需要在 withStyles 配置中过滤该属性，避免透传给 InputBase：

export const CustomInput = withStyles((theme) => ({
    // 原有样式逻辑，可以通过props.height调用自定义高度
    root: (props) => ({
      height: props.height,
      // 其余样式配置
    })
}), {
  // 过滤自定义属性，不向下透传给InputBase
  shouldForwardProp: (prop) => prop !== 'height'
})(InputBase);

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