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

Posted 2023-03-16

【中文标题】如何使用 Emotion CSS 函数传递道具

【英文标题】：How to pass a Prop using Emotion CSS function

【发布时间】：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 );

【参考方案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

【讨论】：

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