[React] カスタムダイアログの実装！

# はじめに

今回は、Reactでカスタムダイアログを実装する方法を紹介します！

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

まず、Material-UIおよびemotion関連のパッケージをインストールします！

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

# 2. カスタムダイアログコンポーネントの作成

`CustomDialog.jsx`ファイルを作成します！
このコンポーネントは、Material-UIの`Dialog`コンポーネントをカスタマイズしています！

主なカスタマイズは以下の３点です。
* topとleftのスタイルプロパティを使用して、ダイアログの表示位置を調整
* DialogContentTextコンポーネント内で、テキストのフォントサイズとテキストの中央揃えを設定
* ダイアログ内のボタンに対しても、fontSizeスタイルを設定

好みに合うように、適時調節してください！
```jsx
// src/components/CustomDialog.jsx
import * as React from "react";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import Button from "@mui/material/Button";

export default function CustomDialog({
  isOpen,
  content,
  confirmButtonLabel,
  cancelButtonLabel,
  onConfirm,
  onCancel,
}) {
  return (
    <React.Fragment>
      {/* Dialogコンポーネントの利用 */}
      <Dialog
        open={isOpen}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        sx={{
          top: "-85%",  // ダイアログの表示位置のカスタマイズ
          left: "0%",   // ダイアログの表示位置のカスタマイズ
        }}
      >
        {/* DialogContentコンポーネントの利用 */}
        <DialogContent>
          {/* DialogContentTextコンポーネントの利用 */}
          <DialogContentText
            id="alert-dialog-description"
            sx={{ fontSize: "25px", textAlign: "center" }}  // ダイアログのテキストスタイルのカスタマイズ
          >
            {content}
          </DialogContentText>
        </DialogContent>

        {/* DialogActionsコンポーネントの利用 */}
        <DialogActions>
          {/* Buttonコンポーネントの利用 */}
          <Button onClick={onConfirm} sx={{ fontSize: "20px" }}>
            {confirmButtonLabel}
          </Button>
          {/* Buttonコンポーネントの利用 */}
          <Button onClick={onCancel} sx={{ fontSize: "20px" }}>
            {cancelButtonLabel}
          </Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
}
```

# 3. テストダイアログの作成
次に、テストダイアログ用の`TestDialog.jsx`ファイルを作成します！
コンテントの中身を変更することで、表示されるテキストが変更されます！
また、`confirmButtonLabel`と`cancelButtonLabel`の値を変更することで、ボタンの名前が変更されます！

```jsx
// src/components/TestDialog.jsx
import * as React from "react";
import CustomDialog from "./CustomDialog";

export default function TestDialog({ isOpen, onConfirm, onCancel }) {
  const content = "テストカスタムダイアログ";

  return (
    <CustomDialog
      isOpen={isOpen}
      content={content}
      confirmButtonLabel="OK"
      cancelButtonLabel="キャンセル"
      onConfirm={onConfirm}
      onCancel={onCancel}
    />
  );
}
```

# 4. メインコンポーネントへの組み込み
最後に、`index.jsx`へ組み込みます！
`onConfirm`と`onCancel`の中身を変更することで、ボタンを押したときの挙動を変更できます！
```jsx
// pages/index.jsx

import { useState } from "react";
import TestDialog from "../components/TestDialog";

export default function HomePage() {
  // カスタムダイアログ表示、非表示管理
  const [testDialogOpen, setTestDialogOpen] = useState(false);

  // ダイアログ表示ボタンクリック処理
  const buttonClickHome = () => {
    setTestDialogOpen(true);
  };

  return (
    <div>
      {/* カスタムダイアログ */}
      <TestDialog
        isOpen={testDialogOpen}
        onConfirm={() => {
          setTestDialogOpen(false);
          console.log("okが押されました");
        }}
        onCancel={() => {
          setTestDialogOpen(false);
          console.log("キャンセルが押されました");
        }}
      />

      <button onClick={buttonClickHome}>カスタムダイアログ表示</button>
    </div>
  );
}

```
ホーム画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570986/adfcb58b-3c69-8b72-9730-0c9da52c8d1c.png)
表示されたカスタムダイアログ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570986/a782b72a-e6e6-9ec5-0299-5818593d1810.png)
okとキャンセルを一回づつ押した時のコンソール画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570986/241eaae4-c1db-44ed-e690-0f097cf93f0a.png)


# まとめ

以上で、カスタムダイアログの実装が完了しました！
今回の記事を参考に、各自のプロジェクトに追加してみてください！