styled-componentsが煩雑にならないための書き方

未分類

どうも〜なるです。

会社でstyled-componentsを使ってるのですが、これは便利ですね。。
JavaScriptでCSSを制御できるなんてとんでもない時代だと思います。

コンポーネント名被ってても、クラスみたいにCSSが勝手に上書きされないし、オーバーライドできたりとか。時代遅れな仕様のCSS君をとことん使いまわせる代物です。

まだやったことないけどキーフレームアニメーションとかもバシバシ書けるみたいです!
うおおお久しぶりにCSS芸人したい。。

で、書いてて思ったんだけど

うんん長い!

styled内だと使える構文が限られてくるから工夫しないと死んじゃいます。
なんとか方法ないかな、、

1. 分割代入

propsから抽出することは決まってるのだからこうすればいいじゃん。
ついでにcssで囲まれた中は再定義しなくても使える!

分割代入はBabel初心者的に???な感じだと思うから一応言うと、
const a = hoge.a;を超簡単に書くやつ。
Reactだとpropsとかstateがオブジェクト型の場合が多いからすごく便利。

2. 分割代入その2

これ今回で一番のみそなんだけど、そもそもこういう書き方ができるんですよ

最初に全部定義するなんて関数みたいね。

とりあえず変な挙動はないからこうしてる。

 

3. and & or

if ~ elseとかswitchが使えたらめちゃくちゃいいんだけど、こういうゴリ押しになるのね。

まあアリだけど、せっかくのstyled-componentsなのにこれじゃReactコンポーネントのstyleプロパティと一緒じゃない。。

&& は左がtrueの時に評価される。
三項演算子は左がtrueなら”?”の先が評価されて、falseなら”:”が評価される。
三項演算子は乱用禁止!

4. どれか一つでもある時

例えば、position指定のtop,bottom,right,leftがひとつでもあればposition: relative;を追加したいときは

まあ長い気もするけど あるならある、ないならないがちゃんと書かないとCSS構文が崩れて”10px top: 10px;”なんてことになるから。。

課題クリア!

ネストしたプロパティを取り出したい。
バリアブル(テーマ)設定できるんだから、こんなのをショートカットできたらいいのにな

themeは分割代入できるんだけど二層目以降はどうやるんだろう。
まだまだJS職人にはなれないようだ。。

追記:2019/12/27

なんとすぐ思いついてました。やっぱり職人かもしれません。

これでprops.theme.color.mainなんて書かなくてもcolor.mainとアクセスできます。

 

テーマに設定したカラーをreturn時に選択

なんかもっとうまい言い方があると思います。

要は、

ってやると色を直接指定してるんですけど、テーマに

を指定してて、レンダリングのプロパティ受け渡し時にテーマの色を指定したい場合です。

普通のReactコンポーネントはthemeをプロパティに持ってません。
でも、いちいちthemeをインポートして使うのはおかしいです。

って感じで角かっこにしたら使えました。当たり前ですね。

JSのオブジェクト参照はobj.propでもobj[“prop”]でもいけます。
当たり前ですね。他の言語では絶対こんなうまくいかないですけど。。

色を入れるときのTips

propsから色を指定するとき

theme=>colorCode=>defaultの順でできたらいいですよね。
まあできます。JSなので

やや備長炭だけどここまで用意してたら完璧。

未分類
スポンサーリンク
シェアする
nullをフォローする
なるのプログラミング備忘録

コメント