IMPROVEMENT: partial migration @mui/styles to tss-react (#1338)

src/Sidebar/ui/SidebarRoot.tsx

@@ -1,8 +1,7 @@
 import React, { useMemo, useCallback, useState, useEffect } from "react";
 import { KEYCODE } from "../../utils/helpers/keyCodes";
 import { styled, Theme, CSSObject } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import MuiDrawer from "@mui/material/Drawer";
 import List from "@mui/material/List";
 import Divider from "@mui/material/Divider";
@@ -100,14 +99,12 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open"
   }),
 }));
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    active: {
-      borderLeft: "3px solid " + theme.palette.primary.main,
-    },
-    listitem: {},
-  }),
-);
+const useStyles = makeStyles()((theme: Theme) => ({
+  active: {
+    borderLeft: "3px solid " + theme.palette.primary.main,
+  },
+  listitem: {},
+}));
 
 export function SidebarRoot(props: { page: Page }): React.ReactElement {
   useRerender(200);
@@ -256,7 +253,7 @@ export function SidebarRoot(props: { page: Page }): React.ReactElement {
     return () => document.removeEventListener("keydown", handleShortcuts);
   }, [canJob, clickPage, props.page]);
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [open, setOpen] = useState(Settings.IsSidebarOpened);
   const toggleDrawer = (): void =>
     setOpen((old) => {