https://qiita.com/cheez921/items/1d13545f8a0ea46beb51

ちーずのフロントエンド道場 Advent Calendar 2021Day 24

※ あくまで自称です。笑 ※ 今後もどんどん拡張していく予定です。 ※ emotion/styled に関しては割愛する予定です。

Emotionとは？

フレームワークにとらわれず使うことができるCSS in JSのフレームワーク。 (styled-componentsと比較されがちだが、emotionの方が後発であるためstyled-componentsができることは基本できます。)

初期設定

利用したいEmotionのパッケージをインストールする

Emotion関連のパッケージ

• @emotion/css
  • フレームワークにとらわれず、Emotionを使用するためのパッケージ。
• @emotion/styled
  • styled-component っぽい記法で書くことができるEmotionパッケージ。(筆者はstyled-componentから乗り換える人用のパッケージだと思っています)
• @emotion/babel-preset-css-prop
  • css propsを使用する場合、本来はすべてのファイルに/** @jsx jsx */を書く必要がある。
  • このJSX Pragmaの問題を解決するためのプラグインが@emotion/babel-preset-css-prop。

基本的には2種類の書き方がある。 (厳密には3種類？@emotion/styledをインストールすればstyled-componentsの書き方もできます！！)

オブジェクトスタイル

- 厳密な型定義がされるため予測変換しやすい
- CSSプロパティがキャメルケースになる

ストリングスタイル

// オブジェクトスタイル
const objectStyle = css({
  maxWidth: '400px',
  margin: '0 auto',
  padding: '10px'
});

// ストリングスタイル
const stringStyle = css`
  max-width: 400px;
  margin: 0 auto;
  padding: 10px
`

// css propは css({}) もしくは css`` を代入するだけ
render(
  <div css={stringSty le}>
    {/* ... */}
  </div>
)

擬似要素やメディアクエリー

両方とも、scssの記述方法で入れ子にすればokそうです！！

ストリングスタイル

const styles = {
  main: css`
    padding: 12px;

    &:hover {
      opacity: 0.5;
    }
  `
}