こんにちは！
アソビューでフロントエンドエンジニアをしている野口です。
先日、特定の条件の場合のみ通常とは異なるスタイルを適用させなければならない場面がありました。
その際に、APIのレスポンスをもとにstyled-copmonentsのtheming機能を使って動的にthemeを切り替える実装を行ったのでそれについて書いていきます。
使っている技術はおもに以下で、SPAのアプリケーションです。
- React.js
- TypeScript
- Style
- styled-components
- css modules（徐々にstyled-componentsに置き換えている）
Theming
styled-componentsにはTheming機能があり、任意のスタイルを子コンポーネントに渡すことが可能です。
設定する際は、ThemeProviderを使い theme プロパティに値を設定します。
この設定をすることで、ThemeProviderの子コンポーネントではstyled-componentsでスタイルを定義する際に、propsからthemeにアクセスすることができるようになります。
カスタムフックとして利用
今回は、各ページで初回表示時に呼ぶAPIのレスポンスをもとにthemeのスタイルを上書きできるように対応しました。
そのため、Context APIでstyled-componentsのThemeProviderをラップしたカスタムフックを作成しています。
実装としては以下のようなイメージです。
使う側では、setColorに値を渡すことでthemeを上書きすることができます。
ちなみに、themeを使いたいコンポーネントの中にはcss modulesのコンポーネントもありました。
ThemeContextなどを使えばcss modulesのままでも利用はできるようなのですが、 どうしても実装が見づらくなるのと、styled-compoenentsに変えるのはそこまで手間ではなかったので今回はすべてstyled-componentsに書き換えています。
Themeの型
ここまででスタイルを更新することはできました。
ただ、いまのままでは colorはany型になってしまい補完もききません。
このままでは不便なので型定義をしていきます。
これで型もつき、補完も効くようになりました。
さいごに
今回のような目的での使い方はあまり多くはないかもしれませんが、少しでも参考になれば幸いです。
アソビューではエンジニアを募集しています！ご興味ある方はぜひ応募ください！
