使用 Emotion.sh 从样式化组件传递道具

Posted 2023-03-15

【中文标题】使用 Emotion.sh 从样式化组件传递道具

【英文标题】：Passing props along from styled component using Emotion.sh

【发布时间】：2020-05-26 19:59:06

【问题描述】：

我使用@emotion\styled 声明了以下样式按钮：

const Button = styled.button`
 background: blue;
 $size(
  width: props => props.width
 )
`

在我的代码中，size 是一个函数，它根据传递的 prop 返回 size css 序列化样式：

const size = ( width: "m" = ) => 
 switch(width) 
  case "s":
   return css`width: 100px`;
  break;
  case "m":
   return css`width: 150px`;
  break;
 
 

<Button >Some text</Button>

但是，我在size 函数中收到的width 值不是来自传递的prop 的解析值，即s，而是一个字符串props => props.width。

有什么方法可以将道具从样式组件传递到函数中，类似于我想要实现的功能？

【参考方案1】：

它不起作用，因为您将匿名函数传递给 width，在您不期望函数的地方。

我很确定这就是你想要做的：

const Button = styled.button`
 background: blue;
 $props => size( width: props.width )
`

这样，您将在样式声明的范围内传递一个匿名函数，从 Emotion 获取道具并随意使用它。