title: How to make redux-form work with TypeScript and styled-components?
body: <p>I'm trying to get redux-form to work with TypeScript and styled-components. In the following code example, why doesn't it work with the styled input component? The input renders, but focus is lost on each keypress. It also takes two clicks to focus element. It seems like redux-form is trying to control the wrapped element returned from styled-components? Both redux-form and styled-components use HOC - higher order components to pass props to underlying element. </p>
  
  <pre><code>export interface ITxtProps extends WrappedFieldProps {
    label?: string;
  }
  
  export const FieldHack = class extends Field&lt;any&gt; {};
  
  const renderTxt = (props: ITxtProps &amp; GenericFieldHTMLAttributes) =&gt; {
    const StyledInput = styled.input`
      background-color: deeppink;
    `;
    const notWorking = &lt;StyledInput {...props.input} /&gt;;
    const worksPerfectly = &lt;input {...props.input} /&gt;;
    return (
    &lt;div&gt;
      &lt;div&gt;{props.label}&lt;/div&gt;
      {notWorking}
    &lt;/div&gt;
  );
  }
  
  const NormalLoginComponent = (props: {
    handleSubmit?: SubmitHandler&lt;{}, {}&gt;;
  }) =&gt; {
    const { handleSubmit } = props;
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        {/* this does not work when using styled components: */}
        &lt;Field name={'email'} component={renderTxt}  /&gt;
  
        {/* this gives an error, property label does not exist on type... */}
        {/*&lt;Field name={'email'} component={renderTxt} label="email" /&gt;*/}
  
        {/* this works, but no intellisense/static types */}
        &lt;FieldHack name={'email2'} component={renderTxt} label="email" /&gt;
  
        &lt;Field name={'password'} component={'input'} type="password" /&gt;
        &lt;Button text={'log in'} onClick={handleSubmit} /&gt;
      &lt;/form&gt;
    );
  };
  
  export interface ILoginForm {
    email: string;
    password: string;
  }
  
  const LoginForm = reduxForm&lt;Readonly&lt;ILoginForm&gt;, {}&gt;({
    form: 'loginNormal',
  })(NormalLoginComponent);
  </code></pre>