title: React-Emotion: pass down defaultProps to in component reuse
body: <p>I have this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import styled from 'react-emotion';
  
  const Box = styled('div')`
    display: flex;
    flex-direction: ${p =&gt; p.direction};
  `;
  
  Box.defaultProps = {
    direction: 'column'
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works just fine when I use the Box component. The default props are there as expected. </p>
  
  <p>However, when I reuse Box with styled, the default props do not get passed down:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import styled from 'react-emotion';
  import Box from './Box';
  
  export const UniqResponsiveBox = styled(Box)`
    // some media queries and other new styles
  `;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I use UniqResponsiveBox, it does not have the defaultProps I declared for Box. The following workaround gets me thru, but seems redundant and I believe Im missing something that accomplishes this only using emotion.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import styled from 'react-emotion';
  
  const BoxContainer = styled('div')`
    display: flex;
    flex-direction: ${p =&gt; p.direction};
  `;
  
  function Box(props) {
    return &lt;BoxContainer {...props}/&gt;
  }
  
  Box.defaultProps = {
    direction: 'column'
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import styled from 'react-emotion';
  import Box from './Box';
  
  export const UniqResponsiveBox = styled(Box)`
    // some responsive queries and other uniq styles
  `;
  
  // In this scenario, the default props are there because I passed them explicitly. Helppp!</code></pre>
  </div>
  </div>
  </p>