\n
![\"\"](\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/09\/20220914-1.png\")
<\/p>\n1. Display result
\n<\/p>\n
2. node modules
\n@mui\/material@^5.10.3
\nreact@18.2.0<\/p>\n
3. Reference 4. Contents 5. Create CustomAlert 5.2 CreateAlertObject 5.3 Add Properties 6. all code 7. Installation of CustomAlert (2) with autoHideDuration<\/b><\/p>\n (3) with autoHideDuration<\/b> and closeButton<\/b><\/p>\n 8. Call CustomAlert 9. Note 1. Display result 2. node modules @mui\/material@^5.10.3 react@18.2.0 3. Reference https:\/\/mui.com\/material-ui\/…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3893"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3893"}],"version-history":[{"count":104,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3893\/revisions"}],"predecessor-version":[{"id":3895,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3893\/revisions\/3895"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nhttps:\/\/mui.com\/material-ui\/react-alert\/#basic-alerts<\/a>
\nhttps:\/\/smartdevpreneur.com\/using-and-styling-the-material-ui-alert-component\/<\/a><\/p>\n
\n(1) Create CustomAlert
\n(2) Installation of CustomAlert
\n(3) Call CustomAlert
\n(4) Note<\/p>\n
\n5.1 Material-UI Alert in a Dialog Component
\n– redisplay only when open
\n– severity = {props.AlertObject.severity}
\n– color = {props.AlertObject.severity} <\/p>\n
\n– open
\n– title
\n– message
\n– severity<\/p>\n
\n– autoHideDuration<\/b> , default = null;
\n– closeButton<\/b> , default = true;<\/p>\n
\n– CustomAlert.tsx<\/p>\n\r\n$ cat CustomAlert.tsx\r\nimport Dialog from '@mui\/material\/Dialog';\r\nimport Alert from '@mui\/material\/Alert';\r\nimport AlertTitle from '@mui\/material\/AlertTitle';\r\nimport { useState } from 'react';\r\n\r\nconst CreateAlertObject = (props) => {\r\n return new AlertObject_class(props);\r\n}\r\n\r\nexport { CreateAlertObject }\r\nexport default CustomAlert;\r\n\r\n\/\/--------------------------- function ------------------------------\r\nfunction CustomAlert(props) {\r\n\r\n const obj = props.AlertObject;\r\n\r\n if (obj.open == false) {\r\n return;\r\n }\r\n\r\n const handleClose = () => {\r\n obj.setOpen(false);\r\n return;\r\n };\r\n\r\n return (\r\n <>\r\n <Dialog open={obj.open} onClick={handleClose}>\r\n {{obj.getCloseButton() ?\r\n (<Alert\r\n sx={{\r\n width: '{obj.width}',\r\n margin: '{obj.margin}',\r\n }}\r\n severity={obj.severity}\r\n color={obj.severity}\r\n onClose={() => {}}\r\n >\r\n <AlertTitle>{obj.title}<\/AlertTitle>\r\n {obj.message}\r\n <\/Alert>)\r\n :\r\n (<Alert\r\n sx={{\r\n width: '{obj.width}',\r\n margin: '{obj.margin}',\r\n }}\r\n severity={obj.severity}\r\n color={obj.severity}\r\n onClose={() => {}}\r\n >\r\n <AlertTitle>{obj.title}<\/AlertTitle>\r\n {obj.message}\r\n <\/Alert>)\r\n }\r\n <\/Dialog>\r\n <\/>\r\n );\r\n}\r\n\r\nfunction AlertObject_class(props) {\r\n\r\n const [open, setOpen] = useState(false);\r\n\r\n const [title, setTitle] = useState('');\r\n const [message, setMessage] = useState('');\r\n const [severity, setSeverity] = useState('success');\r\n\r\n const [width, setWidth] = useState('100%');\r\n const [margin, setMargin] = useState('auto');\r\n\r\n this.open = open;\r\n this.setOpen = setOpen;\r\n\r\n this.title = title;\r\n this.setTitle = setTitle;\r\n this.message = message;\r\n this.setMessage = setMessage;\r\n this.severity = severity;\r\n this.setSeverity = setSeverity;\r\n\r\n this.margin = margin;\r\n this.setMargin = setMargin; \r\n\r\n this.display = dispaly.bind(this);\r\n this.hidden = hidden.bind(this);\r\n\r\n this.autoHideDuration = null;\r\n this.setAutoHideDuration = (time) => this.autoHideDuration = time;\r\n this.initAutoHideDuration = () => this.autoHideDuration = null;\r\n\r\n this.closeButton = true;\r\n this.setCloseButton = (bool) => this.closeButton = bool;\r\n this.getCloseButton = () => this.closeButton ;\r\n\r\n if(props != null) {\r\n if(typeof props.autoHideDuration === \"number\" &&\r\n props.autoHideDuration > 0) {\r\n this.autoHideDuration = props.autoHideDuration;\r\n }\r\n\r\n if(props.closeButton == true || props.closeButton == false ) {\r\n this.setCloseButton ( props.closeButton);\r\n }\r\n }\r\n\r\n return this;\r\n\r\n function display(message, title, severity ) {\r\n\r\n const severitys = [ \"success\" , \"info\" , \"warning\" , \"error\" ];\r\n\r\n if(arguments > 2) {\r\n if(!severitys.includes(severity)) {\r\n console.log(severity +\" is Irregular argument\");\r\n return;\r\n }\r\n }\r\n\r\n this.setMessage( message );\r\n if(title) this.setTitle( title );\r\n if(severity) this.setSeverity( severity );\r\n\r\n this.setOpen( true );\r\n\r\n if(this.autoHideDuration != null) {\r\n setTimeout(function () {\r\n this.setOpen( false )\r\n }.bind(this), this.autoHideDuration);\r\n }\r\n }\r\n \r\n function hidden() {\r\n if(times) {\r\n setTimeout(function () {\r\n this.setOpen( false );\r\n }.bind(this) , times);\r\n } else {\r\n this.setOpen( false );\r\n }\r\n }\r\n};\r\n<\/pre>\n
\n(1) Without autoHideDuration<\/b><\/p>\n\r\nimport CustomAlert, { CreateAlertObject } from '.\/CustomAlert'\r\n\r\nconst AlertObject = CreateAlertObject();\r\n\r\n<CustomAlert AlertObject={AlertObject} \/>\r\n<\/pre>\n\r\nimport CustomAlert, { CreateAlertObject } from '.\/CustomAlert'\r\n\r\nconst AlertObject = CreateAlertObject({autoHideDuration:6000});\r\n\r\n<CustomAlert AlertObject={AlertObject} \/>\r\n<\/pre>\n\r\nimport CustomAlert, { CreateAlertObject } from '.\/CustomAlert'\r\n\r\nconst AlertObject = CreateAlertObject({autoHideDuration:6000,\r\n closeButton:false});\r\n\r\n<CustomAlert AlertObject={AlertObject} \/>\r\n<\/pre>\n
\n– message : message
\n– title : “Warning”
\n– severity : “success” | “info” | “warning” | “error”<\/p>\n\n\n
\n \n before\n<\/th>\n \n after\n<\/th>\n<\/tr>\n \n \n \r\nalert(message)\r\n<\/pre>\n<\/td>\n
\n \r\nAlertObject.display(message, \"Warning\", \"warning\");\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\nBut need to create AlertObject for each page.<\/p>\n","protected":false},"excerpt":{"rendered":"