gatsby 公式チュートリアルメモ part2

公式チュートリアルリンク

https://www.gatsbyjs.com/tutorial/part-two/
パート2の内容のメモ

siteの作成

コマンドを叩いて，part2用のサイトを作成

shell

gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-two

cssファイル作成

globalのcssファイルはこんな感じで追加する

shell

cd src
mkdir styles
cd styles
touch global.css

global.css

html {
  background-color: lavenderblush;
}

jsに外部cssを追加してみる

shell

cd ../..
touch gatsby-browser.js

gatsby-browser.js

import "./src/styles/global.css"

// or:
// require('./src/styles/global.css')

あとは以下のようにビルドしてlocalhostで表示してみる
globalのCSSが読み込まれ，背景がラベンダー色になっていれば成功

shell

gatsby develop

component-scope CSSを使ってみる

新しいコンポーネントとそれに紐づくcssを作る

src/comopents/container.js

import React from "react"
import containerStyles from "./container.module.css"

export default function Container({ children }) {
  return <div className={containerStyles.container}>{children}</div>
}

src/compoents/container.module.css

.container {
  margin: 3rem auto;
  max-width: 600px;
}

hoge.module.cssという名前にするのがポイントらしい

次にページを作る

src/pages/about-css-modules.js

import React from "react"

import Container from "../components/container"

export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
    </Container>
  )
}

http://localhost:8000/about-css-modules/ にアクセスしてみるとcontainerのCSSが適用されているのがわかる

CSS Modulesを使ったcomonentの装飾

人物リストを想定したCSSを作る．

src/pages/about-css-modules.module.css

.user {
  display: flex;
  align-items: center;
  margin: 0 auto 12px auto;
}

.user:last-child {
  margin-bottom: 0;
}

.avatar {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  margin: 0;
}

.description {
  flex: 1;
  margin-left: 18px;
  padding: 12px;
}

.username {
  margin: 0 0 12px 0;
  padding: 0;
}

.excerpt {
  margin: 0;
}

適用する.

src/pages/about-css-modules.js

import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"

console.log(styles)

const User = props => (
  <div className={styles.user}>
    <img src={props.avatar} className={styles.avatar} alt="" />
    <div className={styles.description}>
      <h2 className={styles.username}>{props.username}</h2>
      <p className={styles.excerpt}>{props.excerpt}</p>
    </div>
  </div>
)

export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
      <User
        username="Jane Doe"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
        excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
      <User
        username="Bob Smith"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
        excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
    </Container>
  )
}

自作CSSクラスが適用されているのが確認できた．

CSS-in-JS

CSS-in-JS を gatsbyで使っていく上でおすすめのミニチュートリアルリンクを教えてくれた．

• Emotion (https://www.gatsbyjs.com/docs/emotion/)
• Styled Components (https://www.gatsbyjs.com/docs/styled-components/)

CSS-in-JSをもっと詳しく知りたい人が読むべき記事はここらしい

• Christopher “vjeux” Chedeau’s 2014 presentation that sparked this movement
• Mark Dalgleish’s more recent post “A Unified Styling Language”.

他にgatsbyがサポートしているCSSオプションは以下もあるとのこと

• Typography.js
• Sass
• JSS
• Stylus
• PostCSS