ReactにおけるCSS modulesのクラスに対するcomposesコマンド

このレッスンでは、CSS modulesにおいて、あるCSSクラスのスタイルを別のクラスで再利用する非常に便利な方法について検討します。

前回のレッスンで作成した buttons アプリケーションに戻りましょう。ファイル Buttons.module.css を確認します：

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

すべてのボタンに同じ角丸とフォントサイズを適用したいと仮定しましょう。もちろん、各クラスに同じプロパティを繰り返し記述することも可能です。しかし、CSS modulesの composes コマンドのおかげで、私たちは別の方法を取ることができます。

まず、例えば common-btn という新しいクラスを作成し、これらの共通のプロパティをそこに配置します。そして、このクラスのプロパティを他のクラスで適用するには、それらの中で以下の構文を使用する必要があります：

セレクタ {
	composes: クラス名;
}

これで、私たちの Buttons.module.css のコードは次のようになります：

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

.btn1 {
	composes: common-btn;
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	composes: common-btn;
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	composes: common-btn;
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

過去のレッスンの課題で作成したReactアプリケーション inputs を使用してください。すべての入力フィールドに対して、同じ値を持ついくつかの共通のCSSスタイルを追加してください。そのスタイルが記述された追加のクラスを作成してください。 composes を使用して、それらのスタイルを入力フィールド用の他のすべてのクラスに展開してください。