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,65 +43,84 @@ const i18nProvider = polyglotI18nProvider(
   resolveBrowserLocale()
 );
 
+const defaultTheme = createTheme();
+const generateClassName = createGenerateClassName({
+  disableGlobal: true,
+  seed: "mui-jss",
+});
+
 const App = () => (
-  <Admin
+  <StylesProvider generateClassName={generateClassName}>
-    disableTelemetry
+    <ThemeProvider theme={defaultTheme}>
-    loginPage={LoginPage}
+      <Admin
-    authProvider={authProvider}
+        disableTelemetry
-    dataProvider={dataProvider}
+        loginPage={LoginPage}
-    i18nProvider={i18nProvider}
+        authProvider={authProvider}
-    customRoutes={[
+        dataProvider={dataProvider}
-      <Route key="userImport" path="/import_users" component={ImportFeature} />,
+        i18nProvider={i18nProvider}
-    ]}
+        customRoutes={[
-  >
+          <Route
-    <Resource
+            key="userImport"
-      name="users"
+            path="/import_users"
-      list={UserList}
+            component={ImportFeature}
-      create={UserCreate}
+          />,
-      edit={UserEdit}
+        ]}
-      icon={UserIcon}
+      >
-    />
+        <Resource
-    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
+          name="users"
-    <Resource
+          list={UserList}
-      name="user_media_statistics"
+          create={UserCreate}
-      list={UserMediaStatsList}
+          edit={UserEdit}
-      icon={EqualizerIcon}
+          icon={UserIcon}
-    />
+        />
-    <Resource
+        <Resource
-      name="reports"
+          name="rooms"
-      list={ReportList}
+          list={RoomList}
-      show={ReportShow}
+          show={RoomShow}
-      icon={ReportIcon}
+          icon={RoomIcon}
-    />
+        />
-    <Resource
+        <Resource
-      name="room_directory"
+          name="user_media_statistics"
-      list={RoomDirectoryList}
+          list={UserMediaStatsList}
-      icon={FolderSharedIcon}
+          icon={EqualizerIcon}
-    />
+        />
-    <Resource
+        <Resource
-      name="destinations"
+          name="reports"
-      list={DestinationList}
+          list={ReportList}
-      show={DestinationShow}
+          show={ReportShow}
-      icon={CloudQueueIcon}
+          icon={ReportIcon}
-    />
+        />
-    <Resource
+        <Resource
-      name="registration_tokens"
+          name="room_directory"
-      list={RegistrationTokenList}
+          list={RoomDirectoryList}
-      create={RegistrationTokenCreate}
+          icon={FolderSharedIcon}
-      edit={RegistrationTokenEdit}
+        />
-      icon={ConfirmationNumberIcon}
+        <Resource
-    />
+          name="destinations"
-    <Resource name="connections" />
+          list={DestinationList}
-    <Resource name="devices" />
+          show={DestinationShow}
-    <Resource name="room_members" />
+          icon={CloudQueueIcon}
-    <Resource name="users_media" />
+        />
-    <Resource name="joined_rooms" />
+        <Resource
-    <Resource name="pushers" />
+          name="registration_tokens"
-    <Resource name="servernotices" />
+          list={RegistrationTokenList}
-    <Resource name="forward_extremities" />
+          create={RegistrationTokenCreate}
-    <Resource name="room_state" />
+          edit={RegistrationTokenEdit}
-    <Resource name="destination_rooms" />
+          icon={ConfirmationNumberIcon}
-  </Admin>
+        />
+        <Resource name="connections" />
+        <Resource name="devices" />
+        <Resource name="room_members" />
+        <Resource name="users_media" />
+        <Resource name="joined_rooms" />
+        <Resource name="pushers" />
+        <Resource name="servernotices" />
+        <Resource name="forward_extremities" />
+        <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 {