Emotion vs Styled-Components css` 道具

Question

我看到 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 有什么优势？

Answer 1

好吧，我没有使用情感，但我一直在使用 styled-components 很多。我只是简单地看一下情感，我认为 2 的想法是相似的，在 js 中是 css。我个人的品味是 styled-components，因为 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，例如按钮的样式可以像

Emotion vs Styled-Components css` 道具

Emotion vs Styled-Components css` prop

css

emotion

reactjs

styled-components