title: Conditional rendering not working with styled-components
body: <p>I have this React component with a few properties, and I want styles to apply only if the property has a value, I tried something like this:</p>
  
  <pre><code>export const Text = ({text, color, size, fontFamily}) =&gt; {
  
      const StyledParagraph = styled.p`
          margin: 0;
          font-size: ${props =&gt; props.size !== undefined ? props.size : '1.3em'};
      `;
  
      const textProps = {
          text: [text],
          color: [color],
          size: [size],
          fontFamily: [fontFamily],
      }
  
      return (
          &lt;StyledParagraph {...textProps}&gt;{text}&lt;/StyledParagraph&gt;
      )
  }
  </code></pre>
  
  <p>I call it like:</p>
  
  <pre><code>&lt;Text text="some text"/&gt;
  </code></pre>
  
  <p>I'm not passing the property <code>size</code>, so I want the <code>font-size</code> to be the default value I specified (<code>font-size: ${props =&gt; props.size !== undefined ? props.size : '1.3em'}</code>)</p>
  
  <p>However, that's not working. What am I missing here? Thanks in advance.</p>