HOWTO · React

React でフォントサイズを動的に変更する

この記事では、インラインスタイルを生成して React でフォントサイズを変更する方法を紹介します。

著者 Irakli Tchigladze公開日 2023-06-21更新日 2023-06-21

カスタマイズの柔軟性と可能性は、React の最高の機能の 1つです。開発者は、コンポーネントを動的に非表示および表示し、特定のスタイルまたはクラスを適用する (または適用しない) こともできます。

この記事では、インラインスタイルを生成して React でフォントサイズを変更する方法について説明します。

React でフォントサイズを動的に変更する

動的インラインスタイル値を適用する方法は多数あります。数値を含む変数を使用して、フォントサイズをその数値に設定できます。

この変数は、props としてコンポーネントに渡すことができます。または、状態変数を作成してユーザーの入力を保存することもできます。

例を見てみましょう：

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [size, setSize] = useState(12);
  return (
    <div className="App">
      <label for="fontSize">Specify the font size</label>
      <br></br>
      <br></br>
      <input
        type="text"
        name="fontSize"
        onChange={(e) => setSize(e.target.value)}
      ></input>
      <p style={{ fontSize: `${size}px` }}>Text with dynamic font size</p>
    </div>
  );
}

CodeSandbox でライブデモを見ることができます。

この場合、useState() フックを使用して、フォントサイズのピクセル数となる size 変数と、この値を更新するために使用される関数を含む setSize 変数の 2つの変数を定義しました。 .

size 変数の値を 12 に初期化しました。

この JSX コードには <input> 要素が含まれています。 onChange イベントハンドラーをセットアップして入力フィールドの変更をリッスンし、setSize() 関数を使用して状態変数を更新できます。

最後に、インラインスタイルを設定してフォントサイズを指定します。二重中括弧を使用する必要があることに注意してください。 1 組は JavaScript 式を評価するために必要であり、もう 1 組はオブジェクトを表すために必要です。

fontSize プロパティの値を指定するためにテンプレート横線を使用します。 size 状態変数が変更されると、fontSize CSS プロパティの値も変更されます。

三項演算子を使用して React で動的フォントサイズを生成する

React で動的にフォントサイズを生成する方法は多数あります。たとえば、特定のブール値が true か false かに応じてフォントサイズを変更できます。

エラーメッセージを表示するアプリケーションがあるとします。エラーメッセージを大きくしたい場合があります。

この場合、変数 error を設定できます。これは、エラーがある場合は true、エラーがない場合は false です。次に、三項演算子を使用して fontSize 値を生成できます。

例を見てみましょう：

import "./styles.css";
export default function App() {
  const error = false
  return (
    <div className="App">
      <p style={{ fontSize: error ? "16px" : "12px" }}>Text with dynamic font size</p>
    </div>
  );
}