title: Is using one function inside styled less performant?
body: <pre><code>const Container = styled.div&lt;{ column: string }&gt;(
    (props) =&gt; css`
      display: flex;
      flex-direction: ${props.column};
    `
  );
  </code></pre>
  <p>versus</p>
  <pre><code>const Container = styled.div&lt;{ column: &quot;red&quot;; }&gt;`
    display: flex;
    flex-direction: ${p =&gt; p.column};
  `;
  </code></pre>
  <p>Though the first approach scales better if there are multiple prop-dependent properties (the whole function does not need to be specified every time), all examples use the second approach.</p>
  <p>What is the reasoning behind it? Is the first approach less performant?</p>