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

投稿日: 2022-04-20 2022-10-12
タグ: GatsbyJS

新しい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のプラグインです。（ギャツビーはこれに依存していますが、手動で編集する必要はありません .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にいくつかのシンプルなスタイルを追加します。まず、インポートしましょう styled-components ページ上部、直後 Helmet インポートライン：

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;
`

重要：上記の両方の項目で[テンプレートリテラル文字列]（ js-template-literals-es6 ）が使用されていることに注意してください。（これらはバッククォートであり、一重引用符ではありません。）

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

これで、これらを使用できるようになりました。まず、プレーンを交換しましょう 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プロジェクトにスタイル付きコンポーネントを追加することは難しくなく、真のゲームチェンジャーになる可能性があります。このデモは表面をほとんど傷つけていないので、スタイル付きコンポーネントのドキュメントを深く掘り下げて、それができるすべての驚くべきことを確認することをお勧めします。

getdocs

13036