React CSSモジュールを使ったスタイリングの学習の続き

私たちのbuttonsアプリケーションの作業を続けましょう。今回は、最初からsrcフォルダに生成されていたメインのコンポーネントAppを扱います。ここには2つのdiv、見出し、そしてボタンがあります。

規則に従って、ファイル名App.cssを App.module.cssに変更し、その内容をクリアして、いくつかのタグ用のCSSスタイルを持つクラスを作成します：

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

そして、ファイルApp.jsの内容をクリアします。次に、ReactコンポーネントButtonsと、 App.module.cssからのスタイルをインポートします。タグを書き、それらにスタイルを適用し、 ReactコンポーネントButtonsを配置します：

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

App.module.cssからインポートするスタイルを含むオブジェクトの名前として、単語classesを使用しました。前回の場合と同様に、このオブジェクトはお好きなように名前を付けることができます。

あと少しのステップです。規則に従ってファイル名 index.cssをindex.module.cssに変更し、ファイルindex.jsでインポート行の置き換えを忘れないでください：

import "./index.css";

次の行に：

import "./index.module.css";

これで、ブラウザで私たちのアプリケーションの動作結果を見ることができます。

ブラウザの開発者パネルで生成されたHTMLを開くと、各コンポーネントに固有のクラスが生成されているのがわかります。これにより、個々のコンポーネントのクラス間の衝突を心配する必要はもうありません。

また重要な点として、CSSモジュールは通常の外部CSSファイルのインポートを禁止していません。

レッスンの理論に従って、前回のレッスンの課題で作成したinputsアプリケーションの ReactコンポーネントAppをクリーンアップし、さらに、作成したInputsをスタイル付きの何らかのdivの中に配置してください。 Appにスタイル付きの見出しを追加してください。これらすべてをさらに何らかのdivの中に配置します。 ReactコンポーネントAppのタグのスタイルは App.modules.cssに記述してください。

すべてをまとめて、残りのファイルを正しく接続し、あなたのinputsアプリケーションを起動してください。