Emotion vs Styled-Components css` prop

Question

I've seen that Emotion supports the following features using 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>
)

.

Is there a way to do this using Styled-Components?

Also, what is the advantage of using Styled-Components over Emotion?

Answer 1

well I havent used emotion but I have been using styled-components a lot. I just looked briefly about emotion, I think the idea of the 2 is similar which is css in js. My personal taste is styled-components since the css code is outside of the markup so when reading code it is a little bit easier. So if we want to create a red button we can do like

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

or

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

However writing using emotion it seems to be easier to share css, eg a button can be styled like <button className={css{...buttonBase, ...redButton}}

so to answer your question, I think just pick one that you want to choose. I think they are quite similar