はじめに
この記事では、Vite 環境で Mantine を利用する手順を記載します。
Next.js App Router での利用手順は別の記事に記載しています。
開発環境
開発環境は以下の通りです。
- Windows 11
- React 18.3.1
- TypeScript 5.5.2
- Vite 5.4.10
- @mantine/core 7.13.5
- @mantine/hooks 7.13.5
- PostCSS 8.4.47
プロジェクトファイルの作成
以下のコマンドでプロジェクトファイルを作成します。
npm create vite@latest
作成途中で3問質問があります。
今回は以下の内容を回答しています。
√ Project name: ... mantine-vite-ts
√ Select a framework: » React
√ Select a variant: » TypeScript
プロジェクトファイルが作成されたら以下のコマンドを実行して、ローカルサーバーを起動します。
cd mantine-vite-ts
npm install
npm run dev
ローカルサーバー起動後、ターミナルに表示される URL へアクセスすると、以下の画面が表示されます。
Mantine のインストール
Mantine の利用に必要な dependencies（パッケージ）をインストールします。
npm install @mantine/core @mantine/hooks
PostCSS のインストールと設定
PostCSS に関連する dependencies（パッケージ）をインストールします。
npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars
以下の内容の postcss.config.cjs をアプリケーションのルートディレクトリに作成します。
postcss.config.cjs
module.exports = {
plugins: {
"postcss-preset-mantine": {},
"postcss-simple-vars": {
variables: {
"mantine-breakpoint-xs": "36em",
"mantine-breakpoint-sm": "48em",
"mantine-breakpoint-md": "62em",
"mantine-breakpoint-lg": "75em",
"mantine-breakpoint-xl": "88em",
},
},
},
};
Mantine の利用設定
アプリケーションのルートコンポーネントで以下を追加することで、Mantine が利用できるようになります。
-
@mantine/core/styles.cssのインポート MantineProvider
App.tsx
import { Button, Center, MantineProvider } from "@mantine/core";
import { useState } from "react";
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import "@mantine/core/styles.css";
function App() {
const [count, setCount] = useState(0);
return (
<MantineProvider>
<Center w={1080}>
<Button onClick={() => setCount((count) => count + 1)}>
count is {count}
</Button>
</Center>
</MantineProvider>
);
}
export default App;
動作確認をします。
Mantine の Button コンポーネントの表示を確認できます。
