スポンサーリンク
概要
ReactのUIフレームワークであるChakra UIにおいて、スマホやデスクトップで動的にフォントサイズを指定する方法。
スポンサーリンク
定番パターン
公式ページ含め、レスポンシブ対応の方法として下記のように配列で値を指定する方法が紹介されています。
このような配列を指定する事で、動的に値を変更する事ができます。
1 |
<Text fontSize={["20px", "36px", "46px" ]}>タイトル</Text> |
この方法自体はお手軽で便利なのですが、複数の要素にこのような値を指定するのは手間がかかります。
スポンサーリンク
TextStyleの指定
下記のようにテーマ設定を作成して、TextStyleといった要素を定義し、fontSizeに配列をしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { extendTheme } from "@chakra-ui/react"; const theme = extendTheme({ textStyles: { h1: { fontSize: ["25px", "40px"], // レスポンシブな設定 color: "blue", }, h2: { fontSize: "24px", color: "red", }, h3: { fontSize: "16px", color: "orange", } } }); export default theme; |
このテーマをChakraProviderに読み込ませます。
1 2 3 4 5 6 7 8 |
import * as React from "react"; import theme from "./Theme"; export const App = () => ( <ChakraProvider theme={theme}> ... </ChakraProvider> ); |
あとは、textStyleを指定することでレスポンシブなフォントサイズが指定可能になります。
もちろんサイズ以外のフォント系の設定に対しても同じような設定が可能です。
1 |
<Text textStyle="h1">タイトル</Text> |
スポンサーリンク