【React】Material UI(MUI)のTypographyコンポーネントの使い方

ReactでMaterial UI（MUI）を使って開発していると、文字を表示する場面は必ず出てきます。

そんなときに便利なのがTypographyコンポーネントです。見出し、本文、キャプションなど、統一されたデザインガイドラインに沿ったテキストを簡単に扱えるようになります。

この記事では、Reactの『Material UI(MUI)のTypographyコンポーネント』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

  • Material UIのTypographyコンポーネントとは？
  • Typographyコンポーネントの基本的な使い方
  • variant属性で文字のスタイルを変更する方法
  • component属性でHTMLタグを変更する方法
  • noWrap属性で1行に収める方法
  • sx属性でスタイリングする方法

Material UIのTypographyコンポーネントとは？

Typographyコンポーネントは、テキストをMUIのテーマに沿って整形するためのコンポーネント です。

以下のような特徴があります。

  • variant属性で見出しや本文のスタイルを簡単に切り替えられる
  • component属性でHTMLタグを自由に変更可能
  • sx属性でスタイルを柔軟に指定可能
  • noWrapで文字を折り返さずに1行で表示できる
  • レスポンシブやテーマ（フォントサイズ、色、余白など）と連携できる

つまり、<h1>や<p>を直接書く代わりに、MUIのガイドラインに沿った形で統一感あるUIを実現できるのがTypographyコンポーネントの強みです。

Typographyコンポーネントの基本的な使い方

Material UI(MUI)を利用するためには、Material UIとEmotionをReactプロジェクトにインストールする必要があります。プロジェクト配下で以下のコマンドを実行してインストールしましょう。

Material UIとEmotionをインストールするコマンド

npm install @mui/material @emotion/react @emotion/styled

Material UIは内部的にEmotionというスタイリングライブラリを使用しているので、@emotion/reactと@emotion/styledをインストールしています。なお、Emotionは、JavaScriptでCSSを記述するために作られたCSS-in-JSライブラリです。

以下に、Material UIのTypographyコンポーネントを使用したシンプルなサンプルコードを示しています。

import { Typography } from '@mui/material';

function App() {
  return (
    <div>
      <Typography variant="h1">見出し (h1相当)</Typography>
      <Typography variant="body1">これは本文（body1）です。</Typography>
      <Typography variant="body2" color="text.secondary">
        これは本文（body2, セカンダリカラー）です。
      </Typography>
    </div>
  );
}

export default App;

ここではvariant="h1"を指定して大きな見出しを表示し、body1・body2で通常の本文を表現しています。

出力結果

Typographyコンポーネントの基本的な使い方

variant属性で文字のスタイルを変更する方法

variant属性を指定することで、見出し・本文・キャプションなどのスタイルを簡単に切り替えられます。いかに一例を示します。

<Typography variant="h1">h1 見出し</Typography>
<Typography variant="h2">h2 見出し</Typography>
<Typography variant="subtitle1">サブタイトル1</Typography>
<Typography variant="body1">本文 body1</Typography>
<Typography variant="caption">キャプション</Typography>

代表的なvariant属性には以下のようなものがあります。

variant用途
h1〜h6見出し（h1〜h6相当）
subtitle1サブタイトル1
subtitle2サブタイトル2
body1本文（標準サイズ）
body2本文（小さめ）
captionキャプション（小文字）
buttonボタン用テキスト
overline上付きラベル

component属性でHTMLタグを変更する方法

variant属性で見た目を指定しても、実際に出力されるHTMLタグはMUIのデフォルト設定に従います。例えばvariant="h1"を指定すると、通常は<h1>タグが出力されます。しかし、SEOやアクセシビリティの観点で「見た目は大きな見出しだけど、HTML上は<pにしたい」といったケースもあります。そのときに役立つのがcomponent属性です。

<Typography variant="h1" component="p">
  見た目はh1だが、HTMLタグはpで出力
</Typography>

上記の例では、見た目はh1スタイルですが、実際には<p>タグとしてレンダリングされます。つまり、

  • variant … 見た目のスタイルを決める
  • component … 実際のHTMLタグを決める

という役割分担になります。

noWrap属性で1行に収める方法

テキストが長いと折り返されてしまいますが、noWrap属性を指定すると1行に収め、はみ出した部分は省略記号「…」で表示されます。

<Typography noWrap sx={{ width: 200 }}>
  これは非常に長い文章ですが、noWrapを指定すると1行に収まります。
</Typography>

出力結果

noWrap属性で1行に収める方法

内部的には以下のCSSが適用されています。

white-space: nowrap;        /* 折り返しを禁止 */
overflow: hidden;           /* はみ出した部分を非表示 */
text-overflow: ellipsis;    /* 省略記号（…）を表示 */

つまり、CSSのwhite-space: nowrap;を指定した状態と同じです。MUIが自動的にoverflow: hidden;とtext-overflow: ellipsis;も加えてくれるので、「横幅いっぱいで1行に収める＋はみ出した部分は … で省略」という挙動になります。

sx属性でスタイリングする方法

MUIのコンポーネントは、sx属性を使ってインラインで柔軟にスタイルを指定できます。sxはEmotionをベースにしたMUI独自の書き方で、CSSをオブジェクト形式で指定するのが特徴です。以下にサンプルコードを示します。

<Typography
  sx={{
    padding: 3,
    fontSize: "1.8rem",
    width: "60%",
    textAlign: "center",
    color: (p) => p.palette.grey[200],
    bgcolor: (theme) => theme.palette.primary.main,
    fontWeight: 700,
    borderRadius: 2,
  }}
>
  MUIのTypographyをスタイリング！
</Typography>
  • padding: 3 → MUIのspacingスケール（8px × 3 = 24px）が適用される
  • fontSize: "1.8rem" → 見やすい大きさに調整
  • width: "60%" → 横幅を60%に制限
  • textAlign: "center" → 文字を中央寄せ
  • color: (p) => p.palette.grey[200]→ MUIテーマのグレー系カラーパレットから明るめの色（200番）を取得して文字色に指定
  • bgcolor: (theme) => theme.palette.primary.main → 背景をテーマのprimary色に設定
  • fontWeight: 700 → 太字に
  • borderRadius: 2 → 角丸（「2px」ではなく、テーマに設定された角丸の基本値 (theme.shape.borderRadius) × 2 が適用される）

本記事のまとめ

この記事では、Reactの『Material UI(MUI)のTypographyコンポーネント』について、以下の内容を説明しました。

  • Material UIのTypographyコンポーネントとは？
  • Typographyコンポーネントの基本的な使い方
  • variant属性で文字のスタイルを変更する方法
  • component属性でHTMLタグを変更する方法
  • noWrap属性で1行に収める方法
  • sx属性でスタイリングする方法

お読み頂きありがとうございました。

公式ページ

Material UIのTypographyコンポーネントについて、詳しく知りたい方は以下の公式ページを参考にしてください。

スポンサーリンク