CSS-in-JS ライブラリの emotion が気になっている

CSS-in-JS ライブラリでは styled-components が有名ですが、最近 emotion というライブラリが気になっています。

www.npmjs.com

www.npmjs.com

注意: emotion をまだちゃんと試していないので以下の内容は公式サイトやドキュメントを見た感想に過ぎません

emotion

emotion も CSS-in-JS ライブラリですが、スタイルの書き方にバリエーションがあるのが特徴です。

以下のように Template literal で記述した CSSclassName に渡すパターンや

import { css } from 'emotion'

const color = 'darkgreen'

render(
    <div
        className={css`
            background-color: hotpink;
            &:hover {
                color: ${color};
            }
        `}
    >
        This has a hotpink background.
    </div>
)

https://emotion.sh/docs/css より)

styled-components と同様に CSS を適用したコンポーネントを生成するパターンがあります。

import styled from 'react-emotion'

const Button = styled('button')`
    color: turquoise;
`

render(<Button>This my button component.</Button>)

https://emotion.sh/docs/styled より)

個人的な感想

styled-components のコンポーネントごと生成してしまう方法が好みではなかったので、emotion の Template literal で記述した CSS を className に指定する方法が割と良さそうに見えています。
(本当に個人的な理由として styled-components の vimシンタックスハイライトである vim-styled-components がだいぶ重たいのが辛いという事情もあります)