ReactでのスタイリングにおけるグローバルCSSの使用

私たちにはReactコンポーネント Appがあり、その中にdivがあり、 divの中に3つの段落があると仮定します：

function App() {
	return (
		<div>
			<p>テキスト</p>
			<p>テキスト</p>
			<p>テキスト</p>
		</div>
	);
}

このコンポーネントをスタイリングしましょう。そのために、コンポーネントと同じsrcフォルダ内に、タグ用のスタイルを持つ通常のCSSファイル styles.cssを作成します。

このファイルで、div用にスタイルを持つクラス class1を作成します：

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

次に、最初の段落用にスタイルを持つクラスclass2を追加します：

.class2 {
	color: orangered;
	font-weight: bold;
}

2番目の段落用にスタイルを持つクラスclass3：

.class3 {
	font-style: italic;
	color: brown;
}

最後に、最後の段落用にクラスclass4を作成します：

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

CSSファイルはこれで完了です。後は、タグ用に記述したCSSスタイルを適用するだけです。コンポーネントファイルApp.jsに戻りましょう。

最初に必ず行うべきことは、ファイルの先頭にスタイルファイルstyles.cssのインポート行を追加することです：

import './styles.css';

次に、コンポーネント内でファイルからCSSクラスを適用するために、属性classを使用します。最初の段落にはクラスclass2がありました。適用してみましょう：

<p class="class2">テキスト</p>

同様に、残りのタグにもクラスを追加します。結果として、次のコードが得られます：

<div class="class1">
	<p class="class2">テキスト</p>
	<p class="class3">テキスト</p>
	<p class="class4">テキスト</p>
</div>

divを含み、divの中に2つのボタンを持つReactコンポーネントを作成してください。タグ用のCSSスタイルを持つファイルstyles.cssを作成します。コンポーネントのタグに記述したスタイルを適用してください。