javascript - 使用 Emotion.sh 从样式组件传递 Prop

Question

我使用 @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 width="s">Some text</Button>

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

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

Answer 1

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

我很确定这就是您想要做的:

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

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