私たちは、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.jsx
の先頭にApp.css
という名前のファイルがインポートされています。
インラインスタイルの書き方#
過去には、インラインスタイルはメンテナンス性などの観点からあまり良い方法ではないと言われていましたが、特定の場合には有用です。そして、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;
この例では、styles
というオブジェクトが含まれており、そのオブジェクトには.main
クラスに適用されるスタイルと、input
要素に適用されるスタイルが含まれています。これは、外部スタイルシートで見たいスタイルルールに似ています。そして、これらのオブジェクトを要素のstyle
属性に適用します。
この例では、スタイルオブジェクトが含まれており、そのオブジェクトには.main
クラスに適用されるスタイルと、テキスト入力に適用されるスタイルが含まれています。これらのオブジェクトは、返されるマークアップ内の要素のスタイル属性に適用されます。
注意してください。スタイルを参照する際には、通常の HTML で使用する引用符ではなく、中括弧を使用します。
CSS Modules の使用#
CSS Modulesは、ローカルスコープ変数の利点を持つ CSS を React と一緒に使用することができます。しかし、それは一体何なのでしょうか?
ドキュメントからの引用によれば、
CSS Modules は、個々の CSS ファイルを CSS とデータの両方にコンパイルすることで機能します。CSS の出力は通常のグローバル CSS であり、ブラウザに直接インジェクトするか、連結してファイルに書き込んで本番で使用できます。データは、ファイルで使用した人間が読める名前をグローバルに安全な出力 CSS にマップするために使用されます。
翻訳すると、
CSS Modules は、個々の CSS ファイルを CSS とデータの両方にコンパイルすることで機能します。CSS の出力は通常のグローバル CSS であり、ブラウザに直接インジェクトするか、連結してファイルに書き込んで本番で使用できます。データは、ファイルで使用した人間が読める名前をグローバルに安全な出力 CSS にマップするために使用されます。
要するに、CSS Modules
を使用すると、同じクラス名を複数のファイルで使用しても競合しないようにすることができます。それぞれのクラス名にはユニークなプログラム名が付いています。これは、大規模なアプリケーションで特に便利です。各クラス名は、それをインポートした特定のコンポーネントにローカルに適用されます。
CSS Modules スタイルシートは通常のスタイルシートと似ていますが、拡張子が異なります(例: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
を使ったことはありますか?これは非常に人気があり、実際の CSS を使用してカスタムコンポーネントを JavaScript で構築することができます。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
の状態が切り替わります。その結果、異なる状態のスタイルの間を切り替えることができます。
インラインのif
文では、通常のif/else
構文の代わりに?
を使用しています。else
部分はセミコロンの後にあります。常に初期化後に呼び出すか、状態を使用することを覚えておいてください。たとえば、最後のデモでは、状態はWrapper
コンポーネントのスタイルの上にあるべきです。
まとめ#
React アプリケーションでスタイルを書くためのさまざまな方法を見てきました。一つが他よりも優れているとは言いませんが、使用する方法は具体的な状況によります。
これらの方法について理解が深まり、React のスタイルライブラリにはさまざまなツールがあることを知っていることを願っています。