From d422cbc2f4d965a2dd160981cdb9b601e66e9135 Mon Sep 17 00:00:00 2001
From: Toshimitsu Watanabe <kz86nu@gmail.com>
Date: Mon, 7 Feb 2022 19:29:08 +0900
Subject: [PATCH] Add "transparent" variant to Error Message

---
 src/components/ErrorMessage.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index c8ff6b67..21cd0d8c 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -1,4 +1,4 @@
-import Alert from "@mui/material/Alert";
+import Alert, { AlertProps } from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
 import Box from "@mui/material/Box";
 import React from "react";
@@ -6,11 +6,15 @@ import React from "react";
 export type ErrorMessageProps = {
   reason?: string;
   instruction?: string;
+  variant?: "default" | "transparent";
+  alertProps?: AlertProps;
 };
 
 export const ErrorMessage = ({
   reason,
   instruction,
+  variant,
+  alertProps,
 }: ErrorMessageProps): JSX.Element => {
   return (
     <Box
@@ -23,8 +27,22 @@ export const ErrorMessage = ({
         width: "100%",
       }}
     >
-      <Alert severity="error">
-        <AlertTitle>Error</AlertTitle>
+      <Alert
+        {...alertProps}
+        severity={alertProps?.severity ?? "error"}
+        sx={{
+          wordBreak: "break-all",
+          ...(variant === "transparent"
+            ? {
+                backgroundColor: "inherit",
+                color: "inherit",
+              }
+            : undefined),
+          ...alertProps?.sx,
+        }}
+        icon={alertProps?.icon ?? false}
+      >
+        {variant !== "transparent" ? <AlertTitle>Error</AlertTitle> : null}
         {reason ? <div>{reason}</div> : null}
         {instruction ? (
           <div>