如何使用 Emotion CSS 函数传递道具答案

【问题标题】：How to pass a Prop using Emotion CSS function如何使用 Emotion CSS 函数传递道具
【发布时间】：2020-05-14 10:48:59
【问题描述】：

我知道我可以使用 Emotion's styled() 传递 props

即

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

我可以/如何使用 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")};
    `;

【问题讨论】：

您应该能够以类似的方式传递道具 const Container = props => (
your styles here }});

标签： css styled-components emotion

【解决方案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

【讨论】：

谢谢 - 这是一个不错的选择。