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

src/Terminal/ui/TerminalInput.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Theme } from "@mui/material/styles";
-import { createStyles, makeStyles } from "@mui/styles";
+import { makeStyles } from "tss-react/mui";
 import { Paper, Popper, TextField, Typography } from "@mui/material";
 
 import { KEY, KEYCODE } from "../../utils/helpers/keyCodes";
@@ -10,29 +10,27 @@ import { getTabCompletionPossibilities } from "../getTabCompletionPossibilities"
 import { Settings } from "../../Settings/Settings";
 import { longestCommonStart } from "../../utils/StringHelperFunctions";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    input: {
-      backgroundColor: theme.colors.backgroundprimary,
-    },
-    nopadding: {
-      padding: theme.spacing(0),
-    },
-    preformatted: {
-      margin: theme.spacing(0),
-    },
-    absolute: {
-      margin: theme.spacing(0),
-      position: "absolute",
-      bottom: "12px",
-      opacity: "0.75",
-      maxWidth: "100%",
-      whiteSpace: "pre",
-      overflow: "hidden",
-      pointerEvents: "none",
-    },
-  }),
-);
+const useStyles = makeStyles()((theme: Theme) => ({
+  input: {
+    backgroundColor: theme.colors.backgroundprimary,
+  },
+  nopadding: {
+    padding: theme.spacing(0),
+  },
+  preformatted: {
+    margin: theme.spacing(0),
+  },
+  absolute: {
+    margin: theme.spacing(0),
+    position: "absolute",
+    bottom: "12px",
+    opacity: "0.75",
+    maxWidth: "100%",
+    whiteSpace: "pre",
+    overflow: "hidden",
+    pointerEvents: "none",
+  },
+}));
 
 // Save command in case we de-load this screen.
 let command = "";
@@ -46,7 +44,7 @@ export function TerminalInput(): React.ReactElement {
   const [searchResults, setSearchResults] = useState<string[]>([]);
   const [searchResultsIndex, setSearchResultsIndex] = useState(0);
   const [autofilledValue, setAutofilledValue] = useState(false);
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   // If we have no data in the current terminal history, let's initialize it from the player save
   if (Terminal.commandHistory.length === 0 && Player.terminalCommandHistory.length > 0) {