build: bumpup material-ui

package.json

@@ -12,7 +12,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.3",
+    "@mui/material": "^5.0.3",
+    "@mui/styles": "^5.0.1",
     "firebase": "^9.1.2",
     "next": "^11.1.2",
     "react": "^17.0.2",

src/components/IFrameWidget/editor.tsx

@@ -6,7 +6,7 @@ import {
   TextField,
   Button,
   Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import type { IFrameWidgetProps } from './types';
 
 type Props = {

src/components/TextWidget/editor.tsx

@@ -5,7 +5,7 @@ import {
   Typography,
   FormControlLabel,
   Checkbox,
-} from '@material-ui/core';
+} from '@mui/material';
 import styled from 'styled-components';
 import { Property } from 'csstype';
 import { ref, set } from '@firebase/database';

src/components/TimeWidget/editor.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
   FormControlLabel,
   Checkbox,
-} from '@material-ui/core';
+} from '@mui/material';
 import { ref, set } from '@firebase/database';
 import { db } from '@/lib/firebase';
 import type { TimeWidgetProps } from './types';

src/components/admin/SignInForm/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { signInWithEmailAndPassword } from '@firebase/auth';
-import { TextField, Button } from '@material-ui/core';
+import { TextField, Button } from '@mui/material';
 import { auth } from '@/lib/firebase';
 
 const FormGroup = styled.div`

src/pages/_app.tsx

@@ -1,7 +1,14 @@
 import '@/global.css';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+const theme = createTheme();
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }
 
 export default MyApp

src/pages/admin/index.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
 import {
-  makeStyles,
   CssBaseline,
   Container,
   Box,
   AppBar,
   Toolbar,
   Typography,
-  Button
-} from '@material-ui/core';
+  Button,
+} from '@mui/material';
+import { makeStyles } from '@mui/styles'
 import { User } from '@firebase/auth';
 import { ref, onValue, DataSnapshot } from '@firebase/database';