RalaCode
menusearch

【React】styled-componentsの使い方【具体例あり】

  • Gatsby
  • React
【React】styled-componentsの使い方【具体例あり】
作って学ぶ Next.js/React Webサイト構築
モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）
はじめてつくるReactアプリ （React入門シリーズ）

「フロントエンドでCSSの管理をもっと楽にしたい」

「コンポーネント内にCSSを書けたらいいのに」

今回は上記の悩みにお答えします。
結論から言うと、「styled-components」を使えば解決です。

この記事では、React開発でstyled-componentsを使ってCSS-in-JSを実装する方法を解説します。
ちなみに「CSS-in-JS」はJavaScriptを使ってCSSを書きつつスタイリングする方法のことです。

さらに、styled-componentsならではの応用的なCSSの書き方も解説します。
普通のCSSファイルでは不可能な書き方で、CSS-in-JSのすごさがわかっていただけるかと思います。

styled-componentsとは

styled-componentsは、CSS-in-JSを実現させるための方法のひとつです。
CSS-in-JSのメリットはやはり「CSSの管理が楽になること」です。

コンポーネントとCSSファイルを別々に作ると、クラス名とかの管理が面倒ですよね。
でも、CSS-in-JSではコンポーネント内にCSSも一緒に書くので管理が楽です。

CSS-in-JSには色々な種類があります。

CSS-in-JSの中でもstyled-componentsが一番人気で情報も多いです。
今後も進化していく可能性は高いので、学んでおいて損ではないかと。

では、以下よりstyled-componentsの具体的な使い方を解説していきます。

styled-componentsのインストール

まず、styled-componentsのパッケージをインストールします。
ターミナルに以下を入力して実行してください。

$ npm install --save styled-components

または

$ yarn add styled-components

これで、styled-componentsが使えるようになります。

基本の使い方

ここでは、Reactの基本的な開発環境を想定して解説を進めていきます。
App.jsには以下のように記述します。

/* App.js */

import React from "react";

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;

これに、styled-componentsを使ってスタイリングしていきます。
以下のように記述を追加してください。

/* App.js */

import React from "react";
/* ↓これ追加 */
import styled from "styled-components";

/* ↓これ追加 */
const StyledHello = styled.h1`
  color: red;
`;

const App = () => {
  return (
    <div>
      {/* ↓「h1」を「StyledHello」に変更 */}
      <StyledHello>Hello, world!</StyledHello>
    </div>
  );
};

export default App;

まず、2行目で"styled-components"をインポートしています。

そして「StyledHello」を定義しています。
「StyledHello」という名前は、僕が適当につけました。

記述の形は以下です。

const (名前) = styled.(タグ名)`CSSの記述`;

今回は、「名前」を「StyledHello」にしました。
さらにタグは「h1」にしています。

これで、「Hello, world!」という文字の色が赤色になったと思います。

また、styled-componentsならSass記法も使えます。
以下のように記述してみます。

/* App.js */

import React from "react";
import styled from "styled-components";

const StyledHello = styled.h1`
  color: red;
  /* ↓これ追加 */
  span {
    color: blue;
  }

  /* これも追加 */
  @media (min-width: 768px) {
    span {
      display: block;
    }
  }
`;

const App = () => {
  return (
    <div>
      {/* ↓「span」を追加 */}
      <StyledHello>Hello, world!<span>Hello, world!</span></StyledHello>
    </div>
  );
};

export default App;

上記の後半部分のように、「span」で囲った「Hello, world!」を追加してみました。

さらに、「StyledHello」の中にSass記法で「spanタグ」で囲った文字の色を青色に指定しています。
そして、メディアクエリも使ってspanに「display: block」を指定しています。

styled-componentsを使って、コンポーネント内でCSSスタイリングできました。
別ファイルでCSSを書くより、わかりやすくないですかね。

応用的な使い方

次に、styled-componentsの応用的な使い方をやってみます。
普通のCSSファイルではできないことです。

では、以下のように記述します。

/* App.js */

import React from "react";
import styled from "styled-components";

const StyledHello = styled.h1`
  color: red;

  span {
    color: blue;
  }

  @media (min-width: 768px) {
    span {
      display: block;
    }
  }
`;

const App = () => {
  return (
    <div>
      <StyledHello>Hello, world!<span>Hello, world!</span></StyledHello>
      {/* ↓ボタンを追加 */}
      <button>文字色を変える</button>
    </div>
  );
};

export default App;

上記のように、ボタンを追加してみました。
このボタンを押すと、「Hello, world!」の文字が変わるような仕組みを作ってみます。

少し複雑になりますが、以下のように記述します。

/* App.js */

/* 「useState」をimport↓ */
import React, { useState } from "react";
import styled from "styled-components";

const StyledHello = styled.h1`
  /* 書き換える↓ */
  color: ${props => (props.active ? "blue" : "red")};

  span {
    color: blue;
  }

  @media (min-width: 768px) {
    span {
      display: block;
    }
  }
`;

const App = () => {
  /* ↓これ追加 */
  const [active, setActive] = useState(false);

  /* ↓これ追加 */
  const colorToggle = () => {
    setActive(!active);
  }

  return (
    <div>
      {/*  active={active}を追加↓ */}
      <StyledHello active={active}>Hello, world!<span>Hello, world!</span></StyledHello>
      {/* 「onClick」を追加↓ */}
      <button onClick={colorToggle}>文字色を変える</button>
    </div>
  );
};

export default App;

まず、一番上の方で「useState」をimportしています。
「useStateって何？」って方もいるかもですが、とりあえずわからなくて大丈夫です。

さらに、「StyledHello」の中で文字色の設定を以下のように記述しています。

color: ${props => (props.active ? "blue" : "red")};

/*  略さずに書くとこちら↓ */
color: ${props => (props.active === true ? "blue" : "red")};

なんか複雑ですよね。
上記のコードを簡単に説明すると以下です。

  • 「activeの状態」のときは文字色を「blue」にする

  • 「activeではない状態」のときは文字色を「red」にする

このように、styled-componentsを使えばCSSを動的に変化させることができるわけです。
これがstyled-componentsの応用的な使い方です。

「activeという状態はどうやって作るの？」って感じですよね。
そこで「useState」を使います。

コードを見ていくと、以下のような記述があります。

const [active, setActive] = useState(false);

これにより、「activeという状態」を定義できます。
「useState(false)」とあるので、デフォルトは「activeではない状態」です。

さらにコードを見ていくと、以下のように関数が定義されています。

const colorToggle = () => {
  setActive(!active);
}

これは、「activeの状態」と「activeではない状態」を切り替える関数です。
この2つの状態を切り替えることで、「Hello, world!」の文字色を変えるわけです。

あとはどうやって切り替えるかです。
ここでは「ボタンをクリックしたとき」に切り替えることにします。

コードを見ていくと以下の記述があります。

<button onClick={colorToggle}>文字色を変える</button>

このボタンをクリックしたときに、関数「colorToggle」が発動します。
colorToggleが発動すると、「activeの状態」と「activeではない状態」が切り替わります。

ボタンをクリックすると、「Hello, world!」の文字色が変わります。
試しにクリックしてみてください。

まとめ

styled-componentsを使ってCSS-in-JSを実現させました。
最後に記事の内容をまとめたいと思います。

  • styled-componentsはCSS-in-JSを実現させる方法の一つ

  • コンポーネント内にCSSを書けるため、クラス名やセレクタの管理が楽

  • Sass記法が使える

  • メディアクエリも使える

  • 動的にCSSを変化させることもできる

また、styled-componentsの応用的な使い方をご説明するときに、useStateを使いました。

useStateはReact開発で頻繁に使うことになると思います。
「useStateの使用例をもう少し見たい」という方は以下の記事も合わせてどうぞ。

【React】onClickでclassNameをつけたり外したりする方法
【React】onClickでclassNameをつけたり外したりする方法
記事を読む

というわけで記事は以上です。

作って学ぶ Next.js/React Webサイト構築
モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）
はじめてつくるReactアプリ （React入門シリーズ）

この記事を共有

以下のボタンを押すとSNSが開きます

Copyright © 2023 RalaCode