Passing props to Material-UI HOC

Question

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

Answer 1

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}