Toast container in separate component

src/components/toast/ToastContainer.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { ToastContainer as ReactToastContainer } from "react-toastify";
+import { Close as CloseIcon } from "@material-ui/icons";
+import useStyles from "./styles";
+
+const ToastContainer = () => {
+  var classes = useStyles();
+  return (
+    <ReactToastContainer
+      className={classes.toastsContainer}
+      closeButton={<CloseButton className={classes.notificationCloseButton} />}
+      closeOnClick={false}
+      progressClassName={classes.notificationProgress}
+    />
+  );
+};
+
+function CloseButton({ closeToast, className }) {
+  return <CloseIcon className={className} onClick={closeToast} />;
+}
+
+export default ToastContainer;

src/components/toast/styles.js

@@ -0,0 +1,13 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles((theme) => ({
+  toastsContainer: {
+    width: 400,
+    marginTop: theme.spacing(6),
+    right: 0
+  },
+  notificationCloseButton: {
+    position: "absolute",
+    right: theme.spacing(2)
+  }
+}));

src/pages/notifications/Notifications.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Grid } from "@material-ui/core";
-import { Close as CloseIcon } from "@material-ui/icons";
-import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
+import ToastContainer from "../../components/toast/ToastContainer";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import classnames from "classnames";
@@ -36,14 +36,7 @@ export default function NotificationsPage(props) {
     <>
       <PageTitle title="Notifications" />
       <Grid container spacing={4}>
-        <ToastContainer
-          className={classes.toastsContainer}
-          closeButton={
-            <CloseButton className={classes.notificationCloseButton} />
-          }
-          closeOnClick={false}
-          progressClassName={classes.notificationProgress}
-        />
+        <ToastContainer />
         <Grid item xs={12}>
           <Widget disableWidgetMenu>
             <Grid container item xs={12}>
@@ -416,7 +409,3 @@ export default function NotificationsPage(props) {
     setNotificationPosition(positionId);
   }
 }
-
-function CloseButton({ closeToast, className }) {
-  return <CloseIcon className={className} onClick={closeToast} />;
-}

src/pages/notifications/styles.js

@@ -55,15 +55,6 @@ export default makeStyles((theme) => ({
   notificationItem: {
     marginTop: theme.spacing(2)
   },
-  notificationCloseButton: {
-    position: "absolute",
-    right: theme.spacing(2)
-  },
-  toastsContainer: {
-    width: 400,
-    marginTop: theme.spacing(6),
-    right: 0
-  },
   progress: {
     visibility: "hidden"
   },