title: Styled-component not taking props
body: <p>I'm trying to pass props to my styled component. I am using the styled-component npm dependency. </p>
  
  <pre><code>import React, { Component } from 'react';
  import styled from 'styled-components';
  
  class WidgetContainer extends Component {
  
    render() {
  
      return (
          &lt;Wrapper name='widget-container'&gt;
          &lt;/Wrapper&gt; 
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      user: state.user, 
      bannerStatus: true
    };
  };
  
  export default withRouter(connect(mapStateToProps)(WidgetContainer));
  
  const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    margin: auto;
    align-items: center; 
    justify-content: flex-start;
    background: -webkit-linear-gradient(top, rgba(162, 209, 234, 1) 0%, rgba(56, 83, 132, 1) 100%);
    padding-top: ${(props) =&gt; { 
      console.log(props.bannerStatus)
      console.log('DATA')
      return props.user ? '160px' : '126px'}};
    overflow-y: auto;
    padding-bottom: 40px;
    @media(max-width: 768px) {
      padding-top: 126px;
      padding-bottom: 5px;
    }
  `;
  </code></pre>
  
  <p>The console.log you can see returns undefined. Even though the value is hard-coded. The ternary operator doesn't work as a result. </p>
  
  <p>Here are the docs: <a href="https://www.styled-components.com/docs/basics#adapting-based-on-props" rel="nofollow noreferrer">https://www.styled-components.com/docs/basics#adapting-based-on-props</a>. </p>