title: How to pass a Prop using Emotion CSS function
body: <p>I know I can pass <strong>props</strong> using <a href="https://emotion.sh/docs/introduction" rel="nofollow noreferrer">Emotion's</a> <code>styled()</code></p>
  
  <p>i.e.</p>
  
  <pre><code>const Container = styled("div")&lt;{ position: string }&gt;`
    display: flex;      
    flex-direction: ${({ position }) =&gt; (position === "top" ? "column" : "row")};
    margin: ${({ position }) =&gt; (position === "top" ? "40px" : "0")};
  `;
  </code></pre>
  
  <p>Can I/How can I do the same using Emotion's <code>css()</code> ?</p>
  
  <p>i.e.</p>
  
  <pre><code> const Container = css /*  doesn't work &lt;{ position: string }&gt;*/`
        display: flex;      
        flex-direction: ${({ position }) =&gt; (position === "top" ? "column" : "row")};
        margin: ${({ position }) =&gt; (position === "top" ? "40px" : "0")};
      `;
  </code></pre>