セレクタ内の特定のプロパティを別セレクタでオーバーライドする
javaではクラスを継承して継承元の関数の内容を変更することができます。
このように元からある機能を上書きすることをオーバーライドと呼びますが
cssでもclassNameにセレクタを複数指定することでオーバーライドに似たことができます。
まず、共通化したいコンポーネントのレイアウトを書いていきます。
適当な四角ですが見本なので特に意味はないです。
[jaascript]
#sample-page .box-styles {
background: #3f51b5;
color: #FFF;
width: 80px;
height: 80px;
line-height: 20px;
border-radius: 10%;
text-align: center;
font-size: 12px;
margin: 5px;
padding: 5px; }
[/javascript]
次に、オーバーライドしたいセレクタを書きます。
上のコンポーネントのレイアウトをそのままで背景色だけ変えたいという場合は
以下のようにしてbackgroundのみ記載します。
</pre>
<span style="font-size: 1rem;">#top-page .pack {</span>
background: #3f51b5;
}
#top-page .import {
background: #3fb5a3;
}
<pre>
セレクタが二つできたので、これをclassNameに以下のように追加します。
通常のclassName設定と違い一つ目のセレクタの後ろを一つ空けて色を変更したいセレクタを入れこみます。
<button className=”box-styles pack”/>
<button styles=”box-styles import”/>
これで完了。同じコンポーネントを書くことなく共通化することができました。
複数のコンポーネントが必要になった時にムダなプロパティを書くことなく変えたいプロパティのみを設定する
ことで可読性・整合性を保つことができます。
