How to pass a Prop using Emotion CSS function

Question

I know I can pass props using Emotion's styled()

i.e.

const Container = styled("div")<{ position: string }>`
  display: flex;      
  flex-direction: ${({ position }) => (position === "top" ? "column" : "row")};
  margin: ${({ position }) => (position === "top" ? "40px" : "0")};
`;

Can I/How can I do the same using Emotion's css() ?

i.e.

 const Container = css /* 👉 doesn't work <{ position: string }>*/`
      display: flex;      
      flex-direction: ${({ position }) => (position === "top" ? "column" : "row")};
      margin: ${({ position }) => (position === "top" ? "40px" : "0")};
    `;

Answer 1

To better demonstrate the suggestion in my comment, here's an example using your code

 const Container = (position: string) => (
   <div css={{
     display: flex,     
     flexDirection: ${({ position }) => (position === "top" ? "column" : "row")},
     margin: ${({ position }) => (position === "top" ? "40px" : "0")}
   }}/>
 );

Emotion has some examples of this on their site