nobu blog

プログラミングやゲームの話など。

*



【React】Chakra UIでレスポンシブなフォントサイズを指定する方法

   

概要

ReactのUIフレームワークであるChakra UIにおいて、スマホやデスクトップで動的にフォントサイズを指定する方法。

スポンサーリンク

定番パターン

公式ページ含め、レスポンシブ対応の方法として下記のように配列で値を指定する方法が紹介されています。
このような配列を指定する事で、動的に値を変更する事ができます。

この方法自体はお手軽で便利なのですが、複数の要素にこのような値を指定するのは手間がかかります。

スポンサーリンク

TextStyleの指定

下記のようにテーマ設定を作成して、TextStyleといった要素を定義し、fontSizeに配列をしています。

このテーマをChakraProviderに読み込ませます。

あとは、textStyleを指定することでレスポンシブなフォントサイズが指定可能になります。
もちろんサイズ以外のフォント系の設定に対しても同じような設定が可能です。

スポンサーリンク

 - Javascript, React, TypeScript