ReactにおけるCSS modulesのファイル間でのcomposesコマンド

コマンドcomposesは、あるファイルのスタイルを別のファイルで再利用するためにも適用できます。

以前のレッスンで作成したbuttons アプリケーションに戻りましょう。すべてのボタンに同じ影、カーソルスタイル、太字のフォントを追加したいと仮定します。これらのスタイルはApp.module.cssファイルに配置されているとします。このファイルを開き、先頭にこれらのスタイルを持つ新しいクラスbeautyを追加しましょう：

.beauty { 
	box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
	font-weight: bold;
	cursor: pointer;
}

これをボタンのスタイリングに適用しましょう。そのためには、Buttons.module.cssを開き、 common-btnクラスに変更を加えます。適用したいクラス名beautyと、そのクラスが存在するファイルApp.module.cssを指定したcomposesコマンドの行を追加します：

.common-btn {
	composes: beauty from "../App.module.css"; 
	font-size: 16px;
	border-radius: 3px;
}

前回のレッスンの課題からあなたのアプリケーションのコードを取り、このレッスンで紹介された方法を使用して、あなたの入力欄に何らかの影を付けてください。