GatsbyJSでEmotionを使ってみる

flabaka

Emotionを使ったことがなかったので、(どんな感じなのか)基本的な使い方から、始めてみることに…

yarnを使ってインストール

gatsby-plugin-emotionを、yarnを使って(今回はreactとstyledを)インストールします。

yarn add gatsby-plugin-emotion @emotion/react @emotion/styled

gatsby-config.jsに、設定を追記します。

plugins: [
    {
      resolve: `gatsby-plugin-emotion`,
      options: {
      },
    },
(略)

optionsに指定出来る項目は、以下のページに詳しく書かれていました。

@emotion/react

import { css } from '@emotion/react'

const bgcolor = "#666666";

const Box1 = css`
  width: 200px;
  height: 100px;
  background-color: ${bgcolor};
  color: white;
`

const Box2 = css({
  width: "200px",
  height: "100px",
  backgroundColor: "green",
  color: "white",
})


<div css={Box1}>box1</div>
<div css={Box2}>box2</div>

バッククォートを使った書き方だと、CSSと同じ様にコードを書くことが出来ます。

オブジェクトスタイルの書き方だと、変更点が幾つかあります。

  1. プロパティはキャメルケースで
  2. 値は文字列として
  3. プロパティを複数設定する際は、セミコロンではなくカンマで区切る

個人的には、バッククォートを使ってCSSと同じ様に記述する方が良いかなぁ…

@emotion/styled

次に、styledを使った書き方だと…

import styled from '@emotion/styled'

const bgcolor = "#666666";

const Box3 = styled.div`
  width: 200px;
  height: 100px;
  background-color: ${bgcolor};
  color: white;
`

const Box4 = styled.div({
  width: "200px",
  height: "100px",
  backgroundColor: "#663399",
  color: "white",
})

<Box3>box3</Box3>
<Box4>box4</Box4>

EmotionのStyled Componentsのページに、styledの後に.で繋ぐのではなく、(‘要素名’)を使った書き方もあったので、試してみる。

import styled from '@emotion/styled'

const bgcolor = "#666666";

const Box5 = styled('div')`
  width: 200px;
  height: 100px;
  background-color: ${color};
  color: white;
`

const Box6 = styled('div')({
  width: "200px",
  height: "100px",
  backgroundColor: "#336699",
  color: "white",
})

<Box5>box5</Box5>
<Box6>box6</Box6>

.で繋ぐ&バッククォートを使った記述が、何だかしっくりくるなぁ…


© 2021 flabaka.com