title: How do Styled Components forward props?
body: <p>I have been working with Styled Components for a while now but I'll be honest I never really understood how it works. That is what my question is about.</p>
  
  <p>So, I understand styled components can adapt based on props. What I don't understand is how does the forwarding of props work. </p>
  
  <p>For Example in my case, Im working with React Native. There are some default props which I have given to my input field. Now, styled component wrapper automatically picks up the default height prop but If I explicitly pass the prop it does not pick it up and I have to manually get it from props. What is that about?</p>
  
  <pre><code>import React from "react";
  import styled from "styled-components/native";
  
  const StyledTextInput = styled.TextInput`
     /* Why do I have to do this for custom heights.
      * Isn't height automatically get forwarded?
      */
  
    /* if I comment this height style out, It takes defaultProp height but doesn't take custom height
     * I have to uncomment it for the custom height
     */
  
    height: ${({ height }) =&gt; height};
  
     ...other styles
  `;
  
  const TextInput = ({ height }) =&gt; {
    return &lt;StyledTextInput height={height} /&gt;;
  };
  
  TextInput.defaultProps = {
    height: 50
  };
  
  export default TextInput;
  
  
  // Then In some Smart Component
  class App extends Component {
    render() {
      return (
        &lt;View style={styles.app}&gt;
          &lt;TextInput height={200} /&gt; // ???
          ...other stuff
        &lt;/View&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>Here are my Questions:</p>
  
  <ul>
  <li>What are the cases in which styled component automatically picks up the prop?</li>
  <li>Which props are automatically forwarded.</li>
  <li>How does this prop forwarding work?</li>
  </ul>
  
  <p>Documentation doesn't talk much about that or maybe I have missed it.</p>
  
  <p>Any help would be much appreciated.</p>