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

Question

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

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

在我的代码中，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>

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

是否有任何方法将道具传递到类似于我所要实现的功能的样式组件中？

Answer 1

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

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

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

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