styled-components＋propsでよりよく使う

styled-componentsをうまく使う

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

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

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

index.js

import react from 'react';
import styled from 'styled-components';

const MainBox = props => {

 const Box = styled.div`
  width: ${props.width}px;
  height: ${props.height}px;
  background-color: ＃３３３;
　border: solid 1px #0F0;
 `;

...

}

App.js

import MainBox from '...'

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

...

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

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

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

index.js

import react from 'react';
import styled from 'styled-components';

const MainBox = props => {

 const Box = styled.div`
  position: ${props.position || 'absolute'};
  width: ${props.width || 500}px;
  height: ${props.height || 500}px;
  background-color: ＃３３３;
　border: solid 1px #0F0;
 `;

...

}

App.js

import MainBox from '...'

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

...

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

---

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

最後に

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

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