将props传递给Material-UI HOC

Question

我有一个自定义组件，它调用使用withStyles创建的另一个自定义组件。它看起来像这样

import {FormControl, InputBase, InputLabel, withStyles} from "@material-ui/core";
import React from "react";
export const CustomInput = withStyles((theme) => ({
...
}
}))(InputBase);
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}
minRows={3} maxRows={10}
/>
</FormControl>
);
}

我得到一个错误saying React does not recognize the "minRows" prop on a DOM element.以及" maxrow "。但是当我查看InputBaseAPI时，minRows和maxRows都存在。这是使用v4材质UI

编辑:DOM截图

Answer 1

minRows和maxRows仅在multiline设置为true时有效:

https://mui.com/api/input-base/

当multiline设置为false时，所有未知/未使用的道具都会传递给底层DOM元素。由于minRows和maxRows不是有效的DOM属性，这解释了您得到的错误。当multiline为真时，请确保仅设置最小/最大行。我没有地方可以测试这个，但我相信你可以这样做:

minRows={multiline ? 3 : null}
maxRows={multiline ? 10 : null}

更新:请确保您使用的是最新版本的MUI -您可以通过运行npm update或yarn upgrade来实现。