Как передать опору с помощью функции Emotion CSS - PullRequest
Новая
       35

Как передать опору с помощью функции Emotion CSS

0 голосов
/ 29 января 2020

Я знаю, что могу передать реквизит , используя Emotion's styled()

т.е. 

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")};
    `;

1 Ответ

2 голосов
/ 29 января 2020

Чтобы лучше продемонстрировать предложение в моем комментарии, вот пример использования вашего кода 

 const Container = (position: string) => (
   <div css={{
     display: flex,     
     flexDirection: ${({ position }) => (position === "top" ? "column" : "row")},
     margin: ${({ position }) => (position === "top" ? "40px" : "0")}
   }}/>
 )
`;

Emotion имеет несколько примеров этого на своем сайте

...