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

2021年11月9日

概要

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

定番パターン

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

<Text fontSize={["20px", "36px", "46px" ]}>タイトル</Text>

1	<Text fontSize={["20px", "36px", "46px" ]}>タイトル</Text>

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

TextStyleの指定

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

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;

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に読み込ませます。

import * as React from "react";
import theme from "./Theme";

export const App = () => (
  <ChakraProvider theme={theme}>
　...
  </ChakraProvider>
);

import * as React from "react";

import theme from "./Theme";

export const App = () => (

　...

</ChakraProvider>

);

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

<Text textStyle="h1">タイトル</Text>

1	<Text textStyle="h1">タイトル</Text>