Gatsbyでのスタイル付きコンポーネントの使用

新しいGatsby.jsプロジェクトを作成する場合、スタイル設定に使用できるオプションがいくつかあります。独自のCSS/SCSSスタイルシートを作成したり、Bootstrapなどのフレームワークをインストールしたり、さまざまなCSS-in-JSソリューションを使用したりできます。 styled-components は、最も人気のあるCSS-in-JSSソリューションの1つであり、それには十分な理由があります。パワフルで習得が容易で、ギャツビーと完璧に連携します。それをプロジェクトに追加する方法を探りましょう！

この投稿は、編集の準備ができている作業中のGatsby.jsプロジェクトがすでにあることを前提としています。（サポートが必要な場合は、 Gatsby v2 の最初のステップの手順に従って、後でここに戻ってください。）

インストール

styled-componentsをGatsbyプロジェクトにインストールするのは、非常に簡単な2段階のプロセスです。

1. 必要な依存関係をインストールします。

最初のステップでは、npmから3つの（必須の）依存関係をインストールする必要があります。

styled-components ：メインのstyled-componentsフレームワーク。これは、React用に構築された非常にエレガントで柔軟なCSS-in-JSソリューションです。 SSR、自動プレフィックスなどを自動的に処理します。（ここで彼らの素晴らしいドキュメントを参照してください： styled-components docs ）
gatsby-plugin-styled-components ：スタイル付きコンポーネント用の公式Gatsby.jsプラグイン。
babel-plugin-styled-components ：これは、より読みやすいクラス名、サーバー側のレンダリング機能、より小さなバンドルサイズなどを提供するBabelのプラグインです。（Gatsbyはこれに依存していますが、.babelrcファイルを手動で編集する必要はありません。）

プロジェクトのルートディレクトリに移動し、コマンドプロンプトから次のコマンドを実行してみましょう。

$ yarn add styled-components gatsby-plugin-styled-components babel-plugin-styled-components

注：npmを使用したい場合は、これらをnpmでインストールしてもかまいません。

2. プラグインをGatsby構成に追加します。

2番目/最後のステップでは、プラグインをGatsby構成に追加します。プロジェクトのgatsby-config.jsファイルで、plugins配列に追加しましょう。

gatsby-config.js

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Change plugin default options here, e.g.:
        // ssr: false
        // displayName: false, 
        // minify: false
      },
    },
    //... other plugins
  ]
}

ミニファイやサーバー側のレンダリングを無効にするなど、デフォルト設定を上書きするために使用できるオプションがいくつかあります。これらのの完全なリストと説明は、styled-componentsのドキュメントのここにあります。

プラグインオプションをカスタマイズする予定がない場合（そして私がそうすることはめったにありません）、より迅速な単一行アプローチも機能します。

gatsby-config.js

module.exports = {
  ...
  plugins: [
    `gatsby-plugin-styled-components`,
     //... other plugins
  ]
}

それで全部です！これで、styled-componentsがインストールされ、Gatsbyプロジェクトで使用できるようになりました。

使用法

この投稿は、それ自体が長い投稿になるため、スタイル付きコンポーネントの使用に関する詳細なレッスンを目的としたものではありません。ただし、Gatsbyプロジェクトでの使用法を示すために、いくつかの簡単な例を作成しましょう。

新しいページを作成する

できるだけシンプルにするために、まず/src/pages/sc-demo.jsに基本的な「デモ」ページを作成しましょう。

/src/pages/sc-demo.js

import React from 'react';
import { Link, graphql } from 'gatsby';
import Helmet from 'react-helmet';

import Layout from '../components/layout';

class SCDemoPage extends React.Component {
  render() {
    const siteData = this.props.data.site.siteMetadata;
    const siteTitle = siteData.title;
    const siteDescription = siteData.description;

    return (
      <Layout location={this.props.location}>
        <Helmet
          htmlAttributes={{ lang: 'en' }}
          meta={[{ 
            name: 'description', 
            content: siteDescription 
          }]}
          title={siteTitle}
        />

        <section>
          <h2>Styled Components Demo</h2>

          <div>
            <h3>Banana Milkshakes</h3>
            <p>We'll definitely need frozen bananas 
            and some milk.</p>

            <Link to='/'>To Homepage</Link>
          </div>
        </section>
      </Layout>
    )
  }
};

export default SCDemoPage;

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`;

スタイル付きコンポーネントをインポートして使用する

「バナナミルクセーキ」divにいくつかのシンプルなスタイルを追加します。まず、ページ上部のHelmetインポート行の直後にあるstyled-componentsをインポートしましょう。

import React from 'react';
import { Link, graphql } from 'gatsby';
import Helmet from 'react-helmet';

import styled from "styled-components"; // 💅 yay!

次に、Layoutインポート行のすぐ下に、2つのスタイル付きコンポーネントを作成しましょう。最初のCustomBoxでは、HTMLdiv要素にスタイルを適用するコンポーネントを作成します。（SASSのようなネストに注意してください。）

const CustomBox = styled.div`
  border: 1px solid rgb(0, 143, 104);
  padding: 20px;

  h3 {
    color: rgb(109, 182, 91);
    margin: 0 0 10px;
    padding: 0;
  }
`

2つ目は、GatsbyのLinkコンポーネントにスタイルを適用します。これは、HTML要素だけでなく、ほぼすべてのコンポーネントのスタイルを設定できることを示すためです。（たとえば、react-bootstrapコンポーネントを微調整するために使用しました。）

const StyledLink = styled(Link)`
  color: red;
`

Important: Note the use of [template literal strings](js-template-literals-es6) in both items above! （これらはバッククォートであり、一重引用符ではありません。）

ページ内の新しいコンポーネントを使用する

これで、これらを使用できるようになりました。まず、バナナミルクセーキ情報を囲むプレーンなdivタグを新しいCustomBoxタグと交換しましょう。次に、LinkタグをStyledLinkタグに置き換えます。

そしてここに結果があります：

<CustomBox>
  <h3>Banana Milkshakes</h3>
  <p>We'll definitely need frozen bananas 
  and some milk.</p>
  <StyledLink to="/">To Homepage</StyledLink>
</CustomBox>

それでおしまい！ Gatsbyサイトが開発モードで実行されている場合は、保存後すぐにスタイルが更新されます。

結論

Gatsby.jsプロジェクトにスタイル付きコンポーネントを追加することは難しくなく、真のゲームチェンジャーになる可能性があります。このデモは表面をほとんど傷つけていないので、スタイル付きコンポーネントのドキュメントを深く掘り下げて、それができるすべての驚くべきことを確認することをお勧めします。