Migrate makeStyles to MUI v5

package.json

@@ -25,7 +25,8 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.3.1",
-    "@mui/material": "^5.4.0",
+    "@mui/material": "^5.11.7",
+    "@mui/styles": "^5.11.7",
     "papaparse": "^5.2.0",
     "prop-types": "^15.7.2",
     "ra-language-chinese": "^2.0.10",

src/App.js

@@ -1,5 +1,7 @@
 import React from "react";
 import { Admin, Resource, resolveBrowserLocale } from "react-admin";
+import { StylesProvider, createGenerateClassName } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 import polyglotI18nProvider from "ra-i18n-polyglot";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
@@ -41,7 +43,15 @@ const i18nProvider = polyglotI18nProvider(
   resolveBrowserLocale()
 );
 
+const defaultTheme = createTheme();
+const generateClassName = createGenerateClassName({
+  disableGlobal: true,
+  seed: "mui-jss",
+});
+
 const App = () => (
+  <StylesProvider generateClassName={generateClassName}>
+    <ThemeProvider theme={defaultTheme}>
       <Admin
         disableTelemetry
         loginPage={LoginPage}
@@ -49,7 +59,11 @@ const App = () => (
         dataProvider={dataProvider}
         i18nProvider={i18nProvider}
         customRoutes={[
-      <Route key="userImport" path="/import_users" component={ImportFeature} />,
+          <Route
+            key="userImport"
+            path="/import_users"
+            component={ImportFeature}
+          />,
         ]}
       >
         <Resource
@@ -59,7 +73,12 @@ const App = () => (
           edit={UserEdit}
           icon={UserIcon}
         />
-    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
+        <Resource
+          name="rooms"
+          list={RoomList}
+          show={RoomShow}
+          icon={RoomIcon}
+        />
         <Resource
           name="user_media_statistics"
           list={UserMediaStatsList}
@@ -100,6 +119,8 @@ const App = () => (
         <Resource name="room_state" />
         <Resource name="destination_rooms" />
       </Admin>
+    </ThemeProvider>
+  </StylesProvider>
 );
 
 export default App;

src/components/LoginPage.js

@@ -22,7 +22,7 @@ import {
   Select,
   TextField,
 } from "@mui/material";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import LockIcon from "@mui/icons-material/Lock";
 
 const useStyles = makeStyles(theme => ({
@@ -345,7 +345,6 @@ const LoginPage = ({ theme }) => {
                   type="submit"
                   color="primary"
                   disabled={loading || !supportPassAuth}
-                  className={classes.button}
                   fullWidth
                 >
                   {loading && <CircularProgress size={25} thickness={2} />}
@@ -356,7 +355,6 @@ const LoginPage = ({ theme }) => {
                   color="secondary"
                   onClick={handleSSO}
                   disabled={loading || ssoBaseUrl === ""}
-                  className={classes.button}
                   fullWidth
                 >
                   {loading && <CircularProgress size={25} thickness={2} />}

src/components/RoomDirectory.js

@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import { Avatar, Chip } from "@mui/material";
 import { connect } from "react-redux";
 import FolderSharedIcon from "@mui/icons-material/FolderShared";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import {
   BooleanField,
   BulkDeleteButton,

src/components/devices.js

@@ -8,7 +8,7 @@ import {
   useRefresh,
 } from "react-admin";
 import ActionDelete from "@mui/icons-material/Delete";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import { alpha } from "@mui/material/styles";
 import classnames from "classnames";
 

src/components/media.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
 import classnames from "classnames";
 import { alpha } from "@mui/material/styles";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import {
   BooleanInput,
   Button,

src/components/rooms.js

@@ -24,7 +24,7 @@ import {
 } from "react-admin";
 import get from "lodash/get";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import { Tooltip, Typography, Chip } from "@mui/material";
 import FastForwardIcon from "@mui/icons-material/FastForward";
 import HttpsIcon from "@mui/icons-material/Https";

src/components/users.js

@@ -52,7 +52,7 @@ import { Link } from "react-router-dom";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
 import { DeviceRemoveButton } from "./devices";
 import { ProtectMediaButton, QuarantineMediaButton } from "./media";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 
 const redirect = () => {
   return {