JSXでCSSフォントサイズを設定する方法

インラインスタイルを使用する方法: JSX内で直接スタイルを指定することができます。以下の例では、fontSizeプロパティを使用してフォントサイズを設定しています。

import React from 'react';
function MyComponent() {
  return (
    <div style={{ fontSize: '16px' }}>
      コンテンツのフォントサイズは16ピクセルです。
    </div>
  );
}

CSSクラスを適用する方法: JSX内でCSSクラスを指定し、外部のスタイルシートでフォントサイズを定義する方法もあります。以下の例では、myClassクラスを作成し、そのクラスにフォントサイズを指定しています。

import React from 'react';
import './styles.css';
function MyComponent() {
  return (
    <div className="myClass">
      コンテンツのフォントサイズはスタイルシートで定義された値になります。
    </div>
  );
}

変数を使用する方法: JSX内で変数を使用してフォントサイズを動的に設定することもできます。以下の例では、fontSize変数を使用して動的なフォントサイズを設定しています。

import React from 'react';
function MyComponent() {
  const fontSize = '20px';
  return (
    <div style={{ fontSize }}>
      コンテンツのフォントサイズは変数によって設定されます。現在の値は20ピクセルです。
    </div>
  );
}

これらの方法を使用することで、JSX内でCSSフォントサイズを簡単に設定することができます。適切な方法を選択して、プロジェクトに組み込んでください。