styled-componentsをうまく使う

今回はReactでよく使われるstyled-componentsの使い方を紹介していきます。
既知の物も多くあるかと思いますが、勉強し始めの方に役立てばと思います。
よろしくお願いします。

propsで値を受け取って共通化する

よく使うボタンやSVGアイコンなどは共通化しておくと便利ですが、そこで使える物です。

importreactfrom'react';importstyledfrom'styled-components';constMainBox=props=>{constBox=styled.div`
  width: ${props.width}px;
  height: ${props.height}px;
  background-color: ＃３３３;
　border: solid 1px #0F0;
 `;...}

importMainBoxfrom'...'...//importして使用できます。//指定したプロパティに入ります。//文字列か数値か気をつけましょう。<MainBoxwidth="100"height="100">...

例があまりよろしくないかもしれませんが、開発している際に今後また使いそうな物はこのように
使う場所によってサイズを変えるが、根本の部分は変更できないようにできるので
特にSVGアイコンで使えると思います。自分もアイコンがここではこの大きさなど
使うページで変更をできるので非常に便利で、管理もしやすくなると思います。

propsに値がない時は初期値を適応ように

上記で説明したことで共通化するには十分であると思いますが、
作っていくと色々やりたいことも増える物ですよね。
そこで需要が少ない物かもしれませんが記載していきます。
表題通り初期値を設定しましょう。

importreactfrom'react';importstyledfrom'styled-components';constMainBox=props=>{constBox=styled.div`
  position: ${props.position||'absolute'};
  width: ${props.width||500}px;
  height: ${props.height||500}px;
  background-color: ＃３３３;
　border: solid 1px #0F0;
 `;...}

importMainBoxfrom'...'...//importして使用できます。//指定したプロパティに入ります。//指定しないと初期値が適応される。<MainBoxpotision="fixed">...

このように||で繋ぐことで初期値を設定できます。
使う側で意図的にプロパティを与えないことで初期値が入るため、基本的には１００pxだけど
ここではなんかズレてしまうから９８pxにしたい
のような細かい設定ができるので良いかと思います。
初期値で場合はプロパティを記載しなければいいので、使わないのにまた書くの？？
のような面倒な作業も減らすことができますね。

クラスコンポーネントでも扱うことができるので、そちらがいい場合はそちらでも可能です。
必要がな場合以外はクラスコンポーネントは避けると良いでしょう。
Hooksなどもありますのでね！
自分も色々勉強しないといけないなと思っております。

最後に

すごい記事を書けるわけでもないですが、この記事や内容が
誰かの作品や製品のコードの質向上に役立てば嬉しいです。

閲覧ありがとうございました。