ReactでのStyled Componentsによるスタイリング

これまでのレッスンでは、グローバルCSSとインラインスタイリングを使用したスタイリング手法を検討しました。このレッスンでは、大規模なアプリケーションにより効果的なアプローチ、つまり styled-componentsライブラリの使用について取り組みます。

では、前回のレッスンで使用した CSSスタイルのないコンポーネントを取り上げましょう：

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

まず、Styled Componentsライブラリをインストールします：

npm install --save styled-components

次に、必要なパッケージをAppコンポーネントにインポートします：

import styled from 'styled-components';

これで、タグをスタイルでラップし、それをReactコンポーネントとして使用できるようになりましたが、スタイルはJSに直接付属しています。このアプローチはCSS in JSとも呼ばれます。

最初の段落をスタイリングしましょう。そのために、 App関数の前、インポート行の後にコンポーネントText1を作成します。ライブラリの styledオブジェクトには段落が必要なので、 styled.pと書きます。次に、テンプレートリテラル内で必要なCSSスタイルを通常のCSSのように列挙します：

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

ご覧の通り、ここではテンプレートリテラルとして純粋なCSSを使用しており、非常に便利です。同様に、メディアクエリ、疑似要素、セレクタ、その他のCSS機能を使用できます。

次に、Appコンポーネント関数内で pタグを、作成したCSSスタイル付きのコンポーネント Text1に置き換えます：

<Text1>text</Text1>

同様に、2番目と3番目の段落をスタイリングします。そのためにコンポーネントText2 とText3を作成します：

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

最後に、divをスタイリングします。そのためにコンポーネントを作成し、 Containerと名付けます：

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

すべてのタグを作成したコンポーネントに置き換えます：

import styled from "styled-components";

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

function App() {
	return (
		<Container>
			<Text1>text</Text1>
			<Text2>text</Text2>
			<Text3>text</Text3>
		</Container>
	);
}

このアプローチにより、スタイル付きの再利用可能なコンポーネントを作成できます。

ブラウザの開発者パネルで生成されたマークアップを開くと、各コンポーネントに独自のユニークなクラスが生成されていることがわかります。これにより、個々のコンポーネント間のクラスの衝突を心配する必要がなくなります。

同様に、例えばEmotion ライブラリを使用してコンポーネントをスタイリングすることもできます。

前回のレッスンの課題で作成した Reactコンポーネントを、 Styled Componentsライブラリを使用してスタイリングしてください。