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

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

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

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 という 新しいクラスを作成し、これらの共通の プロパティをそこに配置します。そして、 このクラスのプロパティを他のクラスで 適用するには、それらの中で以下の構文を 使用する必要があります：

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

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

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;
}