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

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

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

App.module.css.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コマンドの行を追加します：

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