styled-componentsでlightenやdarkenはpolishedを使う

SCSSのlightenやdarkenってブラウザベースでさくっとUI作るのに便利でよく使っています。

React + styled-componentsでもlightenやdarken使えないんだっけ?と思い調べたら公式でライブラリが提供されていました。

polishedというstyled-componentsで使えるヘルパーやmixinが使えるライブラリです。

polished | A lightweight toolset for writing styles in JavaScript

lightenやdarkenをstyled-componentsで使う

polishedでlightenとdarkenが提供されているのでimportして使います。

 import { lighten, darken } from 'polished'
 
 const Text = styled.div`
 	color: ${lighten(0.2, #000)}
 `

注意するのはSCSSとは書き方が少し違う点です。

 .text {
 	color: lighten(#000, 20%);
 }

SCSSでlightenやdarkenを使う場合は最初にカラーコード、後に%を指定しますね。

polishedを使えばlightenやdarkenの他にも便利な関数が用意されています。

SCSSのmixinのように使いすぎるとコードを読む時にドキュメントも一緒に読まなきゃいけなくて大変・・ということになりかねないので適度に使うのがいいですね。

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。