MUI の Alert は、ユーザーに通知や警告を表示するためのコンポーネントです。

公式ドキュメント：Alert

基本的な使い方

import React, { useState } from "react";
import { Alert, Button, Snackbar } from "@mui/material"; // 必要なコンポーネントを import します

const BasicAlert: React.FC = () => {
  const [open, setOpen] = useState(false); // アラートの表示状態を管理するためのステートを定義します

  const handleClick = () => { //ボタンをクリックすると open ステートを true に設定し、アラートを表示します
    setOpen(true);
  };

  return (
    <div>
      <Button variant="outlined" onClick={handleClick}> // アラートを表示するためのボタンコンポーネントです
        Show Alert
      </Button>
      <Snackbar open={open}> // アラートをポップアップ表示します
        <Alert severity="success">This is a success alert</Alert> // アラート本体です
      </Snackbar>
    </div>
  );
};

export default BasicAlert;

▼ Button をクリックすると

▼ Alert が表示されます