title: How to preserve props of original html element when using styled components?
body: <p>I found myself in a current situation, I have my <code>Print</code> components which are basic building blocks of my design system and set css to some normalised styles, here is example of input</p>
  
  <p><strong>InputPrint.tsx</strong></p>
  
  <pre><code>import styled from 'styled-components';
  import theme from '../util/theme';
  
  /**
   * Styles
   */
  const InputPrint = styled.input`
    display: inline-block;
    appearance: none;
  `;
  
  export default InputPrint;
  
  </code></pre>
  
  <p>I then use this <code>Print</code> in my actual component(s)</p>
  
  <p><strong>Input.tsx</strong></p>
  
  <pre><code>import React from 'react';
  import styled from 'styled-components';
  import InputPrint from '../blueprints/InputPrint';
  
  /**
   * Styles
   */
  const StyledInput = styled(InputPrint)`
    width: 65vw;
    color: #797155;
  `;
  
  /**
   * Component
   */
  function Input({ ...props }) {
    return (
      &lt;StyledInput
        autoComplete="off"
        autoCorrect="off"
        autoCapitalize="off"
        spellCheck={false}
        {...props}
      /&gt;
    );
  }
  
  export default Input;
  
  </code></pre>
  
  <p>And issue here happens with props, in some components I might have extra props or overwrite default ones as above, but still want to pass them all valid <code>&lt;input /&gt;</code> element props. I tried 2 approaches at typing them i.e.</p>
  
  <pre><code>props: React.ComponentProps&lt;typeof InputPrint&gt;
  </code></pre>
  
  <p>If I do it this way ^ I don't get any autocomplete on props when I use my <code>&lt;Input /&gt;</code></p>
  
  <pre><code>props: React.HTMLProps&lt;HTMLInputElement&gt;
  </code></pre>
  
  <p>if I do it this way ^ I get a typescript error below highlighted inside <code>Input.tsx</code> for <code>&lt;StyledInput /&gt;</code></p>
  
  <blockquote>
    <p>const StyledInput: StyledComponent&lt;"input", any, {}, never> Styles</p>
    
    <p>No overload matches this call.   Overload 1 of 2, '(props:
    Pick,
    HTMLInputElement>, "form" | ... 283 more ... | "step"> &amp; { ...; },
    "ref" | ... 284 more ... | "step"> &amp; Partial&lt;...>, "ref" | ... 284
    more ... | "step"> &amp; { ...; } &amp; { ...; }): ReactElement&lt;...>', gave
    the following error.
        Type '{ accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean |
    undefined; allowTransparency?: boolean | undefined; alt?: string |
    undefined; ... 353 more ...; key?: string | ... 1 more ... |
    undefined; }' is not assignable to type
    'Pick,
    HTMLInputElement>, "form" | ... 283 more ... | "step"> &amp; { ...; },
    "ref" | ... 284 more ... | "step"> &amp; Partial&lt;...>, "ref" | ... 284
    more ... | "step">'.
          Types of property 'ref' are incompatible.
            Type 'string | ((instance: HTMLInputElement | null) => void) | RefObject | null | undefined' is not assignable to
    type '((instance: HTMLInputElement | null) => void) |
    RefObject | null | undefined'.
              Type 'string' is not assignable to type '((instance: HTMLInputElement | null) => void) | RefObject | null
    | undefined'.   Overload 2 of 2, '(props:
    StyledComponentPropsWithAs&lt;"symbol" | "object" | ComponentClass | FunctionComponent | "a" | "abbr" | "address" | "area" |
    "article" | "aside" | "audio" | ... 164 more ... | "view", any, {},
    never>): ReactElement&lt;...>', gave the following error.
        Type '{ accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean |
    undefined; allowTransparency?: boolean | undefined; alt?: string |
    undefined; ... 353 more ...; key?: string | ... 1 more ... |
    undefined; }' is not assignable to type '(IntrinsicAttributes &amp;
    Pick &amp; Partial>,
    string | number | symbol> &amp; { ...; } &amp; { ...; }) |
    (IntrinsicAttributes &amp; ... 3 more ... &amp; { ...; })'.
          Type '{ accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean |
    undefined; allowTransparency?: boolean | undefined; alt?: string |
    undefined; ... 353 more ...; key?: string | ... 1 more ... |
    undefined; }' is not assignable to type '{ as?: "symbol" | "object" |
    ComponentClass | FunctionComponent | "a" | "abbr" |
    "address" | "area" | "article" | "aside" | "audio" | ... 165 more ...
    | undefined; }'.
            Types of property 'as' are incompatible.
              Type 'string | undefined' is not assignable to type '"symbol" | "object" | ComponentClass |
    FunctionComponent | "a" | "abbr" | "address" | "area" | "article"
    | "aside" | "audio" | ... 165 more ... | undefined'.
                Type 'string' is not assignable to type '"symbol" | "object" | ComponentClass | FunctionComponent | "a" |
    "abbr" | "address" | "area" | "article" | "aside" | "audio" | ... 165
    more ... | undefined'.ts(2769)</p>
  </blockquote>