Question

我已经看到Emotion使用CSS道具支持以下功能

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>
)

。

是否可以使用样式化组件来做到这一点？

此外，使用样式化组件而不是使用情感有什么优势？

Answer 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，例如，可以将按钮的样式设置为

情感vs样式组件CSS Pro

1 个答案: