🎨

Mantine v8 → v9 移行で対応した21ページ分の変更まとめ

に公開
React
TypeScript
初心者
frontend
Mantine
tech

自分が運営している UI Memo（UIコンポーネントのデモ・ライブラリ比較サイト）で、Mantine を v8 から v9 にアップデートした。

影響を受けたページは21ページ。対応しながら「これは知らないとハマる」という変更点がいくつかあったので、コード例とともにまとめておく。

Mantine とは

Mantine は React 向けの UI コンポーネントライブラリだ。ボタン・モーダル・フォーム・通知など、よく使うコンポーネントが一通り揃っている。

同じ UI ライブラリとして Chakra UI や Ant Design と比較されることが多い。

  • Chakra UI：シンプルで学習コストが低い。カスタマイズしやすい。
  • Ant Design：コンポーネントが豊富。エンタープライズ向けの見た目。
  • Mantine：機能が充実していてドキュメントが丁寧。フォーム・日付・通知など周辺ライブラリも整っている。

実際のデモと比較は UI Memo のコンポーネントページ で確認できる。

v9 で変わったこと

v9 は React 19.2 以上が必須になった大型アップデートだ。Breaking Changes の数は多いが、一つひとつはシンプルなリネームが中心なので、落ち着いて対応すれば難しくない。

変更点① Text の color prop が廃止された

影響範囲が広いのでまずここを確認。 <Text> や <Anchor> コンポーネントの color prop が c に短縮された。

// ❌ v8 まで
<Text color="red">テキスト</Text>
<Text color="dimmed">補足テキスト</Text>

// ✅ v9 以降
<Text c="red">テキスト</Text>
<Text c="dimmed">補足テキスト</Text>

color のままにしてもエラーにならないが、スタイルが当たらなくなる。grep で color= を検索して一括置換するのが早い。

変更点② Collapse の in prop が expanded にリネームされた

アコーディオンやドロワーでよく使う Collapse コンポーネントの開閉制御 prop が変わった。

// ❌ v8 まで
<Collapse in={opened}>
  <div>コンテンツ</div>
</Collapse>

// ✅ v9 以降
<Collapse expanded={opened}>
  <div>コンテンツ</div>
</Collapse>

in のままにすると Collapse が常に閉じた状態になる。開閉ができなくなるので動作確認で気づきやすいが、見落とすと原因がわかりにくい。

変更点③ Grid の gutter prop が gap にリネームされた

グリッドレイアウトのカラム間隔を指定する prop が変わった。

// ❌ v8 まで
<Grid gutter="xl">
  <Grid.Col span={6}>...</Grid.Col>
  <Grid.Col span={6}>...</Grid.Col>
</Grid>

// ✅ v9 以降
<Grid gap="xl">
  <Grid.Col span={6}>...</Grid.Col>
  <Grid.Col span={6}>...</Grid.Col>
</Grid>

変更点④ Tooltip / Popover の positionDependencies が廃止された

位置再計算のトリガーを指定していた positionDependencies prop が削除された。v9 では自動で処理されるようになったので、prop ごと削除するだけでよい。

// ❌ v8 まで
<Tooltip label="説明" positionDependencies={[value]}>
  <button>ホバーしてね</button>
</Tooltip>

// ✅ v9 以降
<Tooltip label="説明">
  <button>ホバーしてね</button>
</Tooltip>

変更点⑤ Spoiler の initialState が defaultExpanded にリネームされた

テキストの省略表示に使う Spoiler コンポーネントの初期展開状態を指定する prop が変わった。

// ❌ v8 まで
<Spoiler maxHeight={60} initialState={false} showLabel="もっと見る" hideLabel="閉じる">
  長いテキスト...
</Spoiler>

// ✅ v9 以降
<Spoiler maxHeight={60} defaultExpanded={false} showLabel="もっと見る" hideLabel="閉じる">
  長いテキスト...
</Spoiler>

変更点⑥ デフォルトの border-radius が変わった

v8 では sm（4px）がデフォルトだったが、v9 では md（8px）に変更された。全体的に角丸が少し大きくなる。v8 の見た目を維持したい場合はテーマで明示的に指定する。

import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  defaultRadius: 'sm', // v8 の挙動に戻す場合
});

<MantineProvider theme={theme}>
  <App />
</MantineProvider>

変更点⑦ React 19.2 以上が必須になった

v9 は React 19.2 以上でないと動かない。まず React のバージョンを確認してから Mantine をアップデートすること。

# React バージョン確認
node -e "console.log(require('./node_modules/react/package.json').version)"

# アップデート
npm install @mantine/core@9 @mantine/hooks@9 @mantine/notifications@9 @mantine/dates@9

21ページ対応してみて

今回の移行で実感したのは、変更点の数は多いが、一つひとつはシンプルということだ。color → c、in → expanded、gutter → gap など、基本的にはリネームがほとんど。

ただし「エラーにならず静かに壊れる」パターンが多いので、移行後は全ページを目視で確認するのが確実だ。特に color と Collapse は見た目への影響が出やすいので、最初に grep で一括置換してしまうのをおすすめする。

# color= を c= に一括置換（VSCodeの検索・置換でも可）
grep -r 'color="' src/ --include="*.tsx"

Mantine の各コンポーネントの実際のデモは UI Memo で確認できる。モーダル・通知・ページネーション・日付ピッカーなど、Chakra UI・Ant Design との比較形式で掲載している。v9 対応済みのコードスニペットも掲載しているので、実装の参考にしてほしい。

この記事を書いたKは、UI Memo というUIコンポーネント実装リファレンスサイトを運営しています。ライブラリの比較・デモ・コードスニペットを中心にまとめているので、ぜひ覗いてみてください。

Discussion