customInput failed prop type with styled-component passed

[alamchrstn]

Hi, sorry but I got this error when I try to pass a styled-component

import styled from 'styled-components';

const StyledInput = styled((props) => (
  <input {...props} />
))`
  // my stylings...
`

to the customInput prop. The error that I got is the following

Failed prop type: Invalid prop customInput of type object supplied to NumberFormat, expected function.

However the app works just fine.
What's the cause of this if I may get a better understanding? Thank you in advance!

[ferdinandsalis]

I am getting the same warning.

[harry-sm]

I am too.

[blaiprat]

Had the same issue, but after changing the prop to a function wrapper seems to be workign as expecteed. The code that works:

<NumberFormat
    type="text"
    value={value}
    customInput={(props) => <StyledInput {...props} />}
/>

---

Update:
Seems that after applying this only the first key is registered, so still not working as expected

[harry-sm]

@blaiprat
Tried that too same issue, after the first keystroke it fails.

[blaiprat]

In the end, I approached this in another way, by instead creating the styled components definition using NumberFormat this way. This allows to customise it and works as expected

import styled from "styled-components";
import NumberFormat from "react-number-format";


const NumberFormatStyled = styled(NumberFormat)`
    background: transparent;
    border: 0;
`;

const MyComponent = () => {
    return (
        <div>
            My custom format input
            <NumberFormatStyled
                type="text"
                value={value}
            />
        </div>
    )
}

[alextiley]

I have created a pull request which fixes this - the function prop-type is not quite correct and can now be replaced with PropTypes.elementType. As a temporary workaround it's possible to suppress the prop-type warning by wrapping your styled-component in a class component, e.g:

const StyledInput = styled.input`
  // Your styles
`;

class Input extends React.Component {
  render() {
    return (
      <StyledInput {...this.props} />
    );
  }
}

This is not ideal but is another solution for those who stumble upon this.