title: Styled-components use function in styled object
body: <p>Could not find a clear example how to use functions in css objects with <code>styled-components</code>. It's not throwing an error, but background is not added to the CSS output when extracting props like in the example below. </p>
  
  <pre><code>// Simple color function
  const color = (error) =&gt; {
   if (error) {
     return 'red'
   }
   return 'black',
  }
  </code></pre>
  
  <p><strong>Works</strong> - css</p>
  
  <pre><code>const StyledInput = styled.input&lt;InputProps&gt;`
    background: ${({ error }) =&gt; color(error)};`;
  </code></pre>
  
  <p><strong>Working</strong> - css object</p>
  
  <pre><code>const StyledInput = styled.input&lt;InputProps&gt;(props =&gt; ({
    background: color(), // !!! NEED error from props
  }));
  </code></pre>
  
  <p><strong>Not working</strong> - css object</p>
  
  <pre><code>const StyledInput = styled.input&lt;InputProps&gt;(props =&gt; ({
    background: `${({ error }) =&gt; color(error)}`,
  }));
  </code></pre>