ReactでCSSを書くための異なる方法

私たちは、スタイルシートを HTML ドキュメントの<head>にリンクする標準的な方法に慣れていますが、これは CSS を書く方法の一つに過ぎません。そして、シングルページアプリケーション（SPA）では、Reactプロジェクトのようにスタイルを書くにはどうすればよいのでしょうか。

実際、React アプリケーションで CSS を書く方法はいくつかあります。いくつかは従来の方法に似ていますが、いくつかは大きく異なります。次に、私たちが使用できる方法をまとめてみましょう。

外部スタイルシートのインポート#

言うまでもなく、React は CSS ファイルをインポートできます。このプロセスは、HTML の<head>で CSS ファイルをリンクする方法に似ています：

プロジェクトディレクトリに新しい CSS ファイルを作成します。
CSS を書きます。
それを React ファイルにインポートします。
例えば

import "./style.css";

通常、このインポートはファイルの先頭にあります。

import { React } from "react";
import "./App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

上の例では、App.cssという名前のファイルがApp.jsxの先頭にインポートされています。

インラインスタイルの作成#

過去には、インラインスタイルはメンテナンス性などの点であまり良くないと聞いたことがあるかもしれませんが、特定の状況では確かに意味があります。そして、Reactではメンテナンス性は問題ではありません。なぜなら、CSSは通常同じファイル内にあるからです。
以下は、Reactで非常にシンプルなインラインスタイルの書き方です:

<div className="main" style={{ color: "red" }}>

しかし、より良い方法はオブジェクトを渡すことです:

まず、異なる要素のスタイルを含むオブジェクトを作成します。
次に、style属性を使用して要素に追加します。

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

この例には、.mainクラスの要素に適用されるオブジェクトと、input要素に使用されるオブジェクトを含むstylesオブジェクトが含まれています。これらは、外部スタイルシートで見たいスタイルルールに似ています。次に、これらのオブジェクトを返されるマークアップ内の要素のstyle属性に適用します。
この例には、スタイルオブジェクトが含まれており、もう 2 つのオブジェクトが含まれています。一つは.main クラス用、もう一つはテキスト入力用で、外部スタイルシートで見たいスタイルルールに似ています。次に、これらのオブジェクトを返されるマークアップ内の要素のスタイル属性に適用します。
スタイルを参照する際には、通常の HTML で使用する引用符ではなく、中括弧を使用することに注意してください。

CSS Modules の使用#

CSS Modulesは、ローカルスコープ変数の利点を持ち、Reactと一緒に使用できます。しかし、それは一体何なのでしょうか？
ドキュメントの言葉を引用すると

CSS Modules は、個々の CSS ファイルを CSS とデータの両方にコンパイルすることによって機能します。CSS 出力は通常のグローバル CSS であり、ブラウザに直接注入するか、結合してファイルに書き込むことができます。データは、ファイル内で使用した人間が読める名前をグローバルに安全な出力 CSS にマッピングするために使用されます。

翻訳すると次のようになります：

CSS モジュールは、個々の CSS ファイルを CSS とデータにコンパイルすることによって機能します。CSS 出力は通常のグローバル CSS であり、ブラウザに直接注入するか、結合してファイルに書き込むことができます。このデータは、ファイル内で使用した可読名をグローバルに安全な出力 CSS にマッピングするために使用されます。

簡単に言えば、CSS Modulesは、各クラス名にユニークなプログラム名が付与されるため、複数のファイルで同じクラス名を使用しても衝突しないことを可能にします。これは大規模なアプリケーションで特に便利です。各クラス名は、それをインポートする特定のコンポーネントにローカルに作用します。
CSS モジュールスタイルシートは、通常のスタイルシートに似ていますが、異なる拡張子（例えばstyles.module.css）を持っています。これが彼らの設定方法です：

.module.cssを拡張子とするファイルを作成します。
そのモジュールをReactアプリケーションにインポートします（前に見たように）。
要素またはコンポーネントにclassNameを追加し、インポートしたスタイルから特定のスタイルを参照します。

簡単な例：

@tab styles.module.css

/* styles.module.css */
.heading {
  color: #f00;
  font-size: 20px;
}

@tab App.jsx

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

styled-components の使用#

あなたはstyled-componentsを使ったことがありますか？それは非常に人気があり、JavaScript 内で実際の CSS を使用してカスタムコンポーネントを構築することを可能にします。styled-componentは基本的にスタイル付きのReactコンポーネントです。ユニークなクラス名、動的スタイル、より良いCSS管理を含み、各コンポーネントには独自のスタイルがあります。
コマンドラインでstyled-componentsの npm パッケージをインストールします：

npm install styled-components

次に、それを React アプリにインポートします：

import styled from 'styled-components'

コンポーネントを作成し、スタイル属性を割り当てます。Wrapperオブジェクト内でバッククォートを使用してテンプレートリテラルを示すことに注意してください：

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

上記のWrapperコンポーネントは、これらのスタイルを持つdivとしてレンダリングされます。

条件付きスタイル#

styled-componentsの利点の一つは、コンポーネント自体が機能的であることです。なぜなら、CSS内でpropsを使用できるからです。これにより、条件文やstateまたはpropsに基づいてスタイルを変更することが可能になります。
ここにコードのデモがあります：

import { useState } from "react";
import styled from "styled-components";
function App() {
  // display state
  const [display, setDisplay] = useState(true);
  return (
    <>
      <Wrapper $display={display} />
      <button onClick={() => setDisplay(!display)}>Toggle</button>
    </>
  );
}
// the wrapper styled component
const Wrapper = styled.div`
  width: 100%;
  height: 100px;
  background-color: red;
  display: ${(props) => (props.$display ? "block" : "none")};
`;
export default App;

ここでは、divのdisplay属性を操作しています。この状態はボタンによって制御されており、そのボタンをクリックするとdivの状態が切り替わります。これにより、2 つの異なる状態のスタイル間で切り替えが行われます。
インラインのif文では、通常のif/else構文の代わりに?を使用します。else部分はセミコロンの後にあります。常に初期化後に状態を呼び出すか使用することを忘れないでください。例えば、最後のデモでは、状態はWrapperコンポーネントのスタイルの上にあるべきです。

結論#

私たちは、Reactアプリケーションでスタイルを書くためのいくつかの異なる方法を調査しました。どれか一つが他よりも優れているというわけではありません。もちろん、使用する方法は具体的な状況に依存します。
これで、これらの方法について良い理解を得て、あなたのReactスタイルライブラリにたくさんのツールがあることを知っていることを願っています。