I have a custom component that calls another custom component made using withStyles. It looks like this
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>
);
}
I'm getting an error saying React does not recognize the "minRows" prop on a DOM element. As well as "maxRows". But when I look at the InputBase API both minRows and maxRows are present. This is using v4 material UI
EDIT: DOM Screenshot
minRows and maxRows are only valid when multiline is set to true:
https://mui.com/api/input-base/
What happens when multiline is set to false is all unknown/unused props are passed on to the underlying DOM element. Since minRows and maxRows are not valid DOM attributes, this explains the error you are getting. Make sure you only set min/max rows when multiline is actually true. I'm not in a place I can test this, but I believe you can do this:
minRows={multiline ? 3 : null}
maxRows={multiline ? 10 : null}
UPDATE: make sure you're on the latest version of MUI - you can do so by running npm update or yarn upgrade.