Migrate makeStyles to MUI v5

package.json

@@ -26,6 +26,7 @@
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.8",
+    "@mui/styles": "5.14.10",
     "papaparse": "^5.4.1",
     "prop-types": "^15.8.1",
     "ra-language-chinese": "^2.0.10",

src/components/ImportFeature.js

@@ -1,12 +1,6 @@
 import React, { useState } from "react";
-import {
-  Button as ReactAdminButton,
-  useDataProvider,
-  useNotify,
-  Title,
-} from "react-admin";
+import { useDataProvider, useNotify, Title } from "react-admin";
 import { parse as parseCsv, unparse as unparseCsv } from "papaparse";
-import GetAppIcon from "@mui/icons-material/GetApp";
 import {
   Button,
   Card,
@@ -23,19 +17,6 @@ import { generateRandomUser } from "./users";
 
 const LOGGING = true;
 
-export const ImportButton = ({ label, variant = "text" }) => {
-  return (
-    <ReactAdminButton
-      color="primary"
-      component="span"
-      variant={variant}
-      label={label}
-    >
-      <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
-    </ReactAdminButton>
-  );
-};
-
 const expectedFields = ["id", "displayname"].sort();
 const optionalFields = [
   "user_type",

src/components/LoginPage.js

@@ -348,7 +348,6 @@ const LoginPage = ({ theme }) => {
                   type="submit"
                   color="primary"
                   disabled={loading || !supportPassAuth}
-                  className={classes.button}
                   fullWidth
                 >
                   {loading && <CircularProgress size={25} thickness={2} />}
@@ -359,7 +358,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,6 @@ 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 {
   BooleanField,
   BulkDeleteButton,
@@ -23,13 +22,6 @@ import {
   useUnselectAll,
 } from "react-admin";
 
-const useStyles = makeStyles({
-  small: {
-    height: "40px",
-    width: "40px",
-  },
-});
-
 const RoomDirectoryPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[100, 500, 1000, 2000]} />
 );
@@ -158,19 +150,19 @@ const RoomDirectoryFilter = ({ ...props }) => {
         label={translate("resources.rooms.fields.room_id")}
         source="room_id"
         defaultValue={false}
-        style={{ marginBottom: 8 }}
+        sx={{ marginBottom: "8px" }}
       />
       <Chip
         label={translate("resources.rooms.fields.topic")}
         source="topic"
         defaultValue={false}
-        style={{ marginBottom: 8 }}
+        sx={{ marginBottom: "8px" }}
       />
       <Chip
         label={translate("resources.rooms.fields.canonical_alias")}
         source="canonical_alias"
         defaultValue={false}
-        style={{ marginBottom: 8 }}
+        sx={{ marginBottom: "8px" }}
       />
     </Filter>
   );
@@ -181,7 +173,6 @@ export const FilterableRoomDirectoryList = ({
   dispatch,
   ...props
 }) => {
-  const classes = useStyles();
   const filter = roomDirectoryFilters;
   const roomIdFilter = filter && filter.room_id ? true : false;
   const topicFilter = filter && filter.topic ? true : false;
@@ -199,7 +190,7 @@ export const FilterableRoomDirectoryList = ({
         <AvatarField
           source="avatar_src"
           sortable={false}
-          className={classes.small}
+          sx={{ height: "40px", width: "40px" }}
           label="resources.rooms.fields.avatar"
         />
         <TextField

src/components/rooms.js

@@ -24,8 +24,8 @@ import {
 } from "react-admin";
 import get from "lodash/get";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
 import { Tooltip, Typography, Chip } from "@mui/material";
+import Box from "@mui/material/Box";
 import FastForwardIcon from "@mui/icons-material/FastForward";
 import HttpsIcon from "@mui/icons-material/Https";
 import NoEncryptionIcon from "@mui/icons-material/NoEncryption";
@@ -50,13 +50,6 @@ const date_format = {
   second: "2-digit",
 };
 
-const useStyles = makeStyles(theme => ({
-  helper_forward_extremities: {
-    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-    margin: "0.5em",
-  },
-}));
-
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
@@ -129,7 +122,6 @@ const RoomShowActions = ({ basePath, data, resource }) => {
 };
 
 export const RoomShow = props => {
-  const classes = useStyles({ props });
   const translate = useTranslate();
   return (
     <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
@@ -281,9 +273,14 @@ export const RoomShow = props => {
           icon={<FastForwardIcon />}
           path="forward_extremities"
         >
-          <div className={classes.helper_forward_extremities}>
+          <Box
+            sx={{
+              fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+              margin: "0.5em",
+            }}
+          >
             {translate("resources.rooms.helper.forward_extremities")}
-          </div>
+          </Box>
           <ReferenceManyField
             reference="forward_extremities"
             target="room_id"
@@ -329,25 +326,25 @@ const RoomFilter = ({ ...props }) => {
         label={translate("resources.rooms.fields.joined_local_members")}
         source="joined_local_members"
         defaultValue={false}
-        style={{ marginBottom: 8 }}
+        sx={{ marginBottom: "8px" }}
       />
       <Chip
         label={translate("resources.rooms.fields.state_events")}
         source="state_events"
         defaultValue={false}
-        style={{ marginBottom: 8 }}
+        sx={{ marginBottom: "8px" }}
       />
       <Chip
         label={translate("resources.rooms.fields.version")}
         source="version"
         defaultValue={false}
-        style={{ marginBottom: 8 }}
+        sx={{ marginBottom: "8px" }}
       />
       <Chip
         label={translate("resources.rooms.fields.federatable")}
         source="federatable"
         defaultValue={false}
-        style={{ marginBottom: 8 }}
+        sx={{ marginBottom: "8px" }}
       />
     </Filter>
   );

src/components/users.js

@@ -52,26 +52,13 @@ 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";
 
 const redirect = () => {
   return {
     pathname: "/import_users",
   };
 };
 
-const useStyles = makeStyles({
-  small: {
-    height: "40px",
-    width: "40px",
-  },
-  large: {
-    height: "120px",
-    width: "120px",
-    float: "right",
-  },
-});
-
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
   { id: "msisdn", name: "resources.users.msisdn" },
@@ -130,7 +117,7 @@ const UserListActions = ({
       />
       {/* Add your custom actions */}
       <Button component={Link} to={redirect} label="CSV Import">
-        <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
+        <GetAppIcon sx={{ transform: "rotate(180deg)", fontSize: "20px" }} />
       </Button>
     </TopToolbar>
   );
@@ -169,12 +156,11 @@ const UserBulkActionButtons = props => (
   </Fragment>
 );
 
-const AvatarField = ({ source, className, record = {} }) => (
-  <Avatar src={record[source]} className={className} />
+const AvatarField = ({ source, record = {}, sx }) => (
+  <Avatar src={record[source]} sx={sx} />
 );
 
 export const UserList = props => {
-  const classes = useStyles();
   return (
     <List
       {...props}
@@ -188,7 +174,7 @@ export const UserList = props => {
       <Datagrid rowClick="edit">
         <AvatarField
           source="avatar_src"
-          className={classes.small}
+          sx={{ height: "40px", width: "40px" }}
           sortBy="avatar_url"
         />
         <TextField source="id" sortBy="name" />
@@ -344,7 +330,6 @@ const UserTitle = props => {
 };
 
 export const UserEdit = props => {
-  const classes = useStyles();
   const translate = useTranslate();
   return (
     <Edit {...props} title={<UserTitle />} actions={<UserEditActions />}>
@@ -356,7 +341,7 @@ export const UserEdit = props => {
           <AvatarField
             source="avatar_src"
             sortable={false}
-            className={classes.large}
+            sx={{ height: "120px", width: "120px", float: "right" }}
           />
           <TextInput source="id" disabled />
           <TextInput source="displayname" />