Emotion vs Styled-Components css` prop

Posted 2023-03-16

【中文标题】Emotion vs Styled-Components css` prop

【英文标题】：

【发布时间】：2021-02-19 21:56:27

【问题描述】：

我看到 Emotion 使用 css prop 支持以下功能

const wrapperStyle = css`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

<div css=wrapperStyle>
    ...
</div>

&

const color = 'white'

render(
  <div
    className=css`
      padding: 32px;
      font-size: 24px;
      &:hover 
        color: $color;
      
    `
  >
    div content here
  </div>
)

.

有没有办法使用 Styled-Components 做到这一点？

另外，使用 Styled-Components 比 Emotion 有什么优势？

【问题讨论】：

没有优势。 Emotion 具有与样式化组件相同的所有功能，具有样式化组件所没有的更多功能，并且速度更快。使用情感。

【参考方案1】：

好吧，我没有使用情感，但我一直在使用样式组件。我只是简单地看了一下情感，我认为 2 的想法类似于 js 中的 css。我个人的喜好是样式化组件，因为 css 代码在标记之外，所以在阅读代码时会更容易一些。所以如果我们想创建一个红色按钮，我们可以这样做

const BaseButton = styled.button``;
const RedButton = styled(BaseButton)`color: red;`

或

const BaseButton == styled.button`color:$props => props.color||'#OOO'`
const RedButton = <BaseButton color="red" />

然而，使用情感写作似乎更容易分享 css，例如，按钮的样式可以像 ...buttonBase, ...redButton

所以要回答您的问题，我认为只需选择您想要选择的一个即可。我觉得他们很像

【讨论】：

Emotion 还有一个styled 函数。您可以像在第一个示例中一样使用样式化组件的方式来使用它。

好的，我没有用过情绪，所以我不知道。但正如我所说，它们非常相似，所以随便挑一个试试吧:)。我认为情感的小优势是像我一样分享一段 css

您也可以使用样式化组件来做到这一点。 Emotion的优点是速度更快。 API 几乎相同。

好吧，有趣，你有关于基准的链接吗？当您说更快时，您的意思是构建速度更快吗？

情感基准：medium.com/@tkh44/emotion-ad1c45c6d28b