TauriにMantine UIを導入する方法

まえがき

ドキュメントにもあるが、自分用のメモとしてもまとめておく。
ようは、Vite プロジェクトへの導入という理解でいいらしい。

Mantine の導入

インストール

ドキュメントより、利用したい機能を選び、コマンドを生成し実行。

ターミナル

npm install @mantine/core @mantine/hooks @mantine/nprogress @mantine/modals @mantine/spotlight @mantine/carousel embla-carousel-react @mantine/dropzone @mantine/tiptap @tabler/icons-react @tiptap/react @tiptap/extension-link @tiptap/starter-kit @mantine/code-highlight @mantine/notifications @mantine/dates dayjs @mantine/form

その後、postcssなどをインストールする。

ターミナル

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',
      },
    },
  },
};

最後にプロバイダーを設定する。

App.tsxかmain.tsxのどちらかに<MantineProvider>を設定する。
個人的な好みでmain.tsxを選んだがどちらでも良い。

App.tsx

import { Button, MantineProvider } from "@mantine/core";
import "@mantine/core/styles.css";
function App() {
  return (
    <>
      <MantineProvider>
        {各コンポーネント}
      </MantineProvider>
    </>
  );
}

export default App;

or

main.tsx

import { MantineProvider } from "@mantine/core";
import "@mantine/core/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <MantineProvider>
      <App />
    </MantineProvider>
  </React.StrictMode>
);

モーダルを利用する場合

モーダルを利用する場合、別途セットアップが必要である。
ドキュメントはこちら

インストール

ターミナル

npm install @mantine/modals

セットアップ

<MantineProvider>と</MantineProvider>の中に配置することに注意。
これも、App.tsxかmain.tsxのどちらかに<MantineProvider>を設定する。

App.tsx

import { Button, MantineProvider } from "@mantine/core";
import { ModalsProvider } from '@mantine/modals';
import "@mantine/core/styles.css";
function App() {
  return (
    <>
      <MantineProvider>
        <ModalsProvider>
          {各コンポーネント}
        </ModalsProvider>
      </MantineProvider>
    </>
  );
}

export default App;

or

main.tsx

import { MantineProvider } from "@mantine/core";
import { ModalsProvider } from '@mantine/modals';
import "@mantine/core/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <MantineProvider>
      <ModalsProvider>
        <App />
      </ModalsProvider>
    </MantineProvider>
  </React.StrictMode>
);