Передача реквизита от стилизованного компонента с помощью Emotion. sh - PullRequest
Новая
       33

Передача реквизита от стилизованного компонента с помощью Emotion. sh

0 голосов
/ 11 февраля 2020

У меня есть следующая стилизованная кнопка, объявленная с использованием @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.

Есть ли способ передать реквизит в функцию из стилизованного компонента, аналогичного тому, что я пытаюсь достичь?

1 Ответ

1 голос
/ 18 февраля 2020

Это не работает, так как вы передаете анонимную функцию в width, в месте, где вы не ожидаете функцию.

Я почти уверен, что это то, что вы пытаясь сделать: 

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

Таким образом, вы передаете анонимную функцию в рамках объявленного стиля, получаете реквизит от Emotion и можете свободно использовать его по своему усмотрению.

...