如何使用 Emotion CSS 函数传递 Prop

Question

我知道我可以通过 props 使用 Emotion's styled()

即

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

I/How 我可以使用 Emotion 的 css() 做同样的事情吗？

即

 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

为了更好地展示我评论中的建议，这里有一个使用您的代码的示例

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

Emotion 在他们的网站上有一些examples of this

如何使用 Emotion CSS 函数传递 Prop

How to pass a Prop using Emotion CSS function

css

emotion

styled-components