Revert "migrate some components to Mui5 new styling system (#72)"

This reverts commit 72ef61e286.

src/components/navbar/action/CategorySelect.tsx

@@ -6,6 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useEffect, useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import createStyles from '@mui/styles/createStyles';
 import Button from '@mui/material/Button';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -16,6 +18,13 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import client from 'util/client';
 
+const useStyles = makeStyles(() => createStyles({
+    paper: {
+        maxHeight: 435,
+        width: '80%',
+    },
+}));
+
 interface IProps {
     open: boolean
     setOpen: (value: boolean) => void
@@ -28,6 +37,7 @@ interface ICategoryInfo {
 }
 
 export default function CategorySelect(props: IProps) {
+    const classes = useStyles();
     const { open, setOpen, mangaId } = props;
     const [categoryInfos, setCategoryInfos] = useState<ICategoryInfo[]>([]);
 
@@ -72,12 +82,7 @@ export default function CategorySelect(props: IProps) {
 
     return (
         <Dialog
-            sx={{
-                '.MuiDialog-paper': {
-                    maxHeight: 435,
-                    width: '80%',
-                },
-            }}
+            classes={classes}
             maxWidth="xs"
             open={open}
         >