Laravel + React + Inertia.js + Material UI（MUI）の DatePicker を組み合わせる

表題の件について詰まってしまったのでメモとして残しておきます。

1. 必要なパッケージのインストール
2. LocalizationProvider の設定
3. DatePicker コンポーネントの使用

1. 必要なパッケージのインストール

まず、MUI の DatePicker を使うために必要なパッケージをインストールします。

以下のコマンドを実行してください。

npm install @mui/x-date-pickers @mui/material @emotion/react @emotion/styled dayjs

2. LocalizationProvider の設定

MUI の LocalizationProvider を Inertia.js の設定に組み込むために、App コンポーネントの設定を修正します。

以下は修正後のコードです。

// resources/js/app.jsx

import "./bootstrap";
import "../css/app.css";

import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

const appName = import.meta.env.VITE_APP_NAME || "ImprovePartner";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.tsx`,
            import.meta.glob("./Pages/**/*.tsx")
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);

        // LocalizationProvider を Inertia.js の App コンポーネントに組み込む
        root.render(
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <App {...props} />
            </LocalizationProvider>
        );
    },
    progress: {
        color: "#4B5563",
    },
});

3. DatePicker コンポーネントの使用

次に、DatePicker コンポーネントをページ内で使用します。

例えば、resources/js/Pages/ExamplePage.jsx での使用例を以下に示します。

// resources/js/Pages/ExamplePage.jsx

import React, { useState } from 'react';
import { DatePicker } from '@mui/x-date-pickers';

export default function ExamplePage() {
    const [selectedDate, setSelectedDate] = useState(null);

    return (
        <div>
            <h1>Example Page</h1>
            <DatePicker
                label="Select Date"
                value={selectedDate}
                onChange={(newValue) => setSelectedDate(newValue)}
                renderInput={(params) => <TextField {...params} />}
            />
        </div>
    );
}

以上でMUI の DatePicker を Inertia.js 経由で使用することができます。

上記の手順に従って、適切にインポートとプロバイダーの設定を行えば、DatePicker コンポーネントが期待通りに動作しました。

おかしい箇所などあればご指摘いただけるとありがたいです。