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

package-lock.json

@@ -43,7 +43,8 @@
         "react-resizable": "^3.0.5",
         "react-syntax-highlighter": "^15.5.0",
         "remark-gfm": "^3.0.1",
-        "sprintf-js": "^1.1.3"
+        "sprintf-js": "^1.1.3",
+        "tss-react": "^4.9.10"
       },
       "devDependencies": {
         "@babel/core": "^7.23.0",
@@ -16896,6 +16897,30 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
+    "node_modules/tss-react": {
+      "version": "4.9.10",
+      "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.9.10.tgz",
+      "integrity": "sha512-uQj+r8mOKy0tv+/GAIzViVG81w/WeTCOF7tjsDyNjlicnWbxtssYwTvVjWT4lhWh5FSznDRy6RFp0BDdoLbxyg==",
+      "dependencies": {
+        "@emotion/cache": "*",
+        "@emotion/serialize": "*",
+        "@emotion/utils": "*"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/server": "^11.4.0",
+        "@mui/material": "^5.0.0",
+        "react": "^16.8.0 || ^17.0.2 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/server": {
+          "optional": true
+        },
+        "@mui/material": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

package.json

@@ -43,7 +43,8 @@
     "react-resizable": "^3.0.5",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
-    "sprintf-js": "^1.1.3"
+    "sprintf-js": "^1.1.3",
+    "tss-react": "^4.9.10"
   },
   "description": "A cyberpunk-themed incremental game",
   "devDependencies": {
@@ -86,13 +87,13 @@
     "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
     "react-refresh": "^0.14.0",
+    "rehype-mathjax": "^4.0.3",
+    "remark-math": "^5.1.1",
     "style-loader": "^3.3.3",
     "typescript": "^5.2.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.2",
+    "webpack-dev-server": "^4.15.2"
-    "remark-math": "^5.1.1",
-    "rehype-mathjax": "^4.0.3"
   },
   "engines": {
     "node": ">=14"

src/Achievements/AchievementsRoot.tsx

@@ -1,26 +1,22 @@
 import React from "react";
 
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
 import { Theme } from "@mui/material/styles";
-
 import { AchievementList } from "./AchievementList";
 import { achievements } from "./Achievements";
 import { Typography } from "@mui/material";
 import { Player } from "@player";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  root: {
-    root: {
+    width: 50,
-      width: 50,
+    padding: theme.spacing(2),
-      padding: theme.spacing(2),
+    userSelect: "none",
-      userSelect: "none",
+  },
-    },
+}));
-  }),
-);
 
 export function AchievementsRoot(): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <div className={classes.root} style={{ width: "90%" }}>
       <Typography variant="h4">Achievements</Typography>

src/BitNode/ui/BitverseRoot.tsx

@@ -3,8 +3,7 @@ import { BitNodes } from "../BitNode";
 import { PortalModal } from "./PortalModal";
 import { CinematicText } from "../../ui/React/CinematicText";
 import { Player } from "@player";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
@@ -12,33 +11,31 @@ import { Settings } from "../../Settings/Settings";
 import Button from "@mui/material/Button";
 import { CompletedProgramName } from "@enums";
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles()(() => ({
-  createStyles({
+  portal: {
-    portal: {
+    cursor: "pointer",
-      cursor: "pointer",
+    fontFamily: "inherit",
-      fontFamily: "inherit",
+    fontSize: "1rem",
-      fontSize: "1rem",
+    fontWeight: "bold",
-      fontWeight: "bold",
+    lineHeight: 1,
-      lineHeight: 1,
+    padding: 0,
-      padding: 0,
+    "&:hover": {
-      "&:hover": {
+      color: "#fff",
-        color: "#fff",
-      },
     },
-    level0: {
+  },
-      color: Settings.theme.bnlvl0,
+  level0: {
-    },
+    color: Settings.theme.bnlvl0,
-    level1: {
+  },
-      color: Settings.theme.bnlvl1,
+  level1: {
-    },
+    color: Settings.theme.bnlvl1,
-    level2: {
+  },
-      color: Settings.theme.bnlvl2,
+  level2: {
-    },
+    color: Settings.theme.bnlvl2,
-    level3: {
+  },
-      color: Settings.theme.bnlvl3,
+  level3: {
-    },
+    color: Settings.theme.bnlvl3,
-  }),
+  },
-);
+}));
 
 interface IPortalProps {
   n: number;
@@ -48,7 +45,7 @@ interface IPortalProps {
 }
 function BitNodePortal(props: IPortalProps): React.ReactElement {
   const [portalOpen, setPortalOpen] = useState(false);
-  const classes = useStyles();
+  const { classes } = useStyles();
   const bitNode = BitNodes[`BitNode${props.n}`];
   if (bitNode == null) {
     return <>O</>;

src/Bladeburner/ui/Console.tsx

@@ -5,36 +5,33 @@ import { KEY } from "../../utils/helpers/keyCodes";
 
 import { Box, List, ListItem, Paper, TextField, Typography } from "@mui/material";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 import { useRerender } from "../../ui/React/hooks";
 
 interface ILineProps {
   content: React.ReactNode;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  textfield: {
-    textfield: {
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+    width: "100%",
-      width: "100%",
+  },
-    },
+  input: {
-    input: {
+    backgroundColor: theme.colors.backgroundsecondary,
-      backgroundColor: theme.colors.backgroundsecondary,
+  },
-    },
+  nopadding: {
-    nopadding: {
+    padding: theme.spacing(0),
-      padding: theme.spacing(0),
+  },
-    },
+  preformatted: {
-    preformatted: {
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+  },
-    },
+  list: {
-    list: {
+    padding: theme.spacing(0),
-      padding: theme.spacing(0),
+    height: "100%",
-      height: "100%",
+  },
-    },
+}));
-  }),
-);
 
 function Line(props: ILineProps): React.ReactElement {
   return (
@@ -49,7 +46,7 @@ interface IProps {
 }
 
 export function Console(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [command, setCommand] = useState("");
   const consoleInput = useRef<HTMLInputElement>(null);
   useRerender(1000);

src/Casino/CardDeck/ReactCard.tsx

@@ -1,8 +1,7 @@
 import React, { FC } from "react";
 import { Card, Suit } from "./Card";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 import Paper from "@mui/material/Paper";
 
 interface Props {
@@ -10,35 +9,33 @@ interface Props {
   hidden?: boolean;
 }
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles()(() => ({
-  createStyles({
+  card: {
-    card: {
+    padding: "10px",
-      padding: "10px",
+    border: "solid 1px #808080",
-      border: "solid 1px #808080",
+    backgroundColor: "white",
-      backgroundColor: "white",
+    display: "inline-block",
-      display: "inline-block",
+    borderRadius: "10px",
-      borderRadius: "10px",
+    fontSize: "18.5px",
-      fontSize: "18.5px",
+    textAlign: "center",
-      textAlign: "center",
+    margin: "3px",
-      margin: "3px",
+    fontWeight: "bold",
-      fontWeight: "bold",
+  },
-    },
+  red: {
-    red: {
+    color: "red",
-      color: "red",
+  },
-    },
 
-    black: {
+  black: {
-      color: "black",
+    color: "black",
-    },
+  },
-    value: {
+  value: {
-      fontSize: "20px",
+    fontSize: "20px",
-      fontFamily: "sans-serif",
+    fontFamily: "sans-serif",
-    },
+  },
-  }),
+}));
-);
 
 export const ReactCard: FC<Props> = ({ card, hidden }) => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   let suit: React.ReactNode;
   switch (card.suit) {
     case Suit.Clubs:

src/Corporation/ui/DivisionWarehouse.tsx

@@ -1,7 +1,7 @@
 // React Component for displaying an Industry's warehouse information
 // (right-side panel in the Industry UI)
 import React, { useState } from "react";
-import { createStyles, makeStyles } from "@mui/styles";
+import { makeStyles } from "tss-react/mui";
 import { Box, Button, Paper, Tooltip, Typography } from "@mui/material";
 import * as corpConstants from "../data/Constants";
 import { CityName, CorpUnlockName } from "@enums";
@@ -32,16 +32,14 @@ interface WarehouseProps {
   rerender: () => void;
 }
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles()(() => ({
-  createStyles({
+  retainHeight: {
-    retainHeight: {
+    minHeight: "3em",
-      minHeight: "3em",
+  },
-    },
+}));
-  }),
-);
 
 function WarehouseRoot(props: WarehouseProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const corp = useCorporation();
   const division = useDivision();
   const [smartSupplyOpen, setSmartSupplyOpen] = useState(false);

src/Corporation/ui/MoneyCost.tsx

@@ -2,19 +2,16 @@ import * as React from "react";
 import { formatMoney } from "../../ui/formatNumber";
 import { Corporation } from "../Corporation";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  unbuyable: {
-    unbuyable: {
+    color: theme.palette.action.disabled,
-      color: theme.palette.action.disabled,
+  },
-    },
+  money: {
-    money: {
+    color: theme.colors.money,
-      color: theme.colors.money,
+  },
-    },
+}));
-  }),
-);
 
 interface IProps {
   money: number;
@@ -22,7 +19,7 @@ interface IProps {
 }
 
 export function MoneyCost(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   if (!(props.corp.funds > props.money)) return <span className={classes.unbuyable}>{formatMoney(props.money)}</span>;
 
   return <span className={classes.money}>{formatMoney(props.money)}</span>;

src/CotMG/ui/Cell.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import { TableCell as MuiTableCell, TableCellProps } from "@mui/material";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   root: {
     border: "1px solid white",
     width: "5px",
@@ -16,7 +16,7 @@ export const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
     <MuiTableCell
       {...props}
       classes={{
-        root: useStyles().root,
+        root: useStyles().classes.root,
         ...props.classes,
       }}
     />

src/DevMenu/ui/SourceFilesDev.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 
 import { Accordion, AccordionSummary, AccordionDetails, Button, ButtonGroup, Typography } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { makeStyles } from "@mui/styles";
+import { makeStyles } from "tss-react/mui";
 
 import { Player } from "@player";
 import { Sleeve } from "../../PersonObjects/Sleeve/Sleeve";
@@ -11,7 +11,7 @@ import { MaxSleevesFromCovenant } from "../../PersonObjects/Sleeve/SleeveCovenan
 
 // Update as additional BitNodes get implemented
 const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   group: {
     display: "inline-flex",
     placeItems: "center",
@@ -23,7 +23,7 @@ const useStyles = makeStyles({
 });
 
 export function SourceFilesDev({ parentRerender }: { parentRerender: () => void }): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const setSF = useCallback(
     (sfN: number, sfLvl: number) => () => {

src/Faction/ui/Info.tsx

@@ -11,8 +11,7 @@ import { Reputation } from "../../ui/React/Reputation";
 import { Favor } from "../../ui/React/Favor";
 import { MathJax } from "better-react-mathjax";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 import Box from "@mui/material/Box";
@@ -24,14 +23,12 @@ interface IProps {
   factionInfo: FactionInfo;
 }
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles()({
-  createStyles({
+  noformat: {
-    noformat: {
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    lineHeight: "1em",
-      lineHeight: "1em",
+  },
-    },
+});
-  }),
-);
 
 function DefaultAssignment(): React.ReactElement {
   return (
@@ -46,7 +43,7 @@ function DefaultAssignment(): React.ReactElement {
 
 export function Info(props: IProps): React.ReactElement {
   useRerender(200);
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const Assignment = props.factionInfo.assignment ?? DefaultAssignment;
 

src/Gang/ui/GangMemberStats.tsx

@@ -21,7 +21,7 @@ interface IProps {
 }
 
 export function GangMemberStats(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const asc = {
     hack: props.member.calculateAscensionMult(props.member.hack_asc_points),

src/Locations/ui/City.tsx

@@ -18,24 +18,21 @@ import { Page } from "../../ui/Router";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
 interface IProps {
   city: City;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  location: {
-    location: {
+    color: theme.colors.maplocation,
-      color: theme.colors.maplocation,
+    whiteSpace: "nowrap",
-      whiteSpace: "nowrap",
+    margin: "0px",
-      margin: "0px",
+    padding: "0px",
-      padding: "0px",
+    cursor: "pointer",
-      cursor: "pointer",
+  },
-    },
+}));
-  }),
-);
 
 function toLocation(location: Location): void {
   if (location.name === LocationName.TravelAgency) {
@@ -97,7 +94,7 @@ function ASCIICity(props: IProps): React.ReactElement {
     Y: 24,
     Z: 25,
   };
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const lineElems = (s: string): (string | React.ReactElement)[] => {
     const elems: (string | React.ReactElement)[] = [];

src/PersonObjects/Sleeve/ui/StatsElement.tsx

@@ -33,7 +33,7 @@ interface IProps {
 }
 
 export function StatsElement(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <Table sx={{ display: "table", mb: 1, width: "100%" }}>
@@ -109,7 +109,7 @@ export function StatsElement(props: IProps): React.ReactElement {
 }
 
 export function EarningsElement(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   let data: (string | JSX.Element)[][] = [];
   if (isSleeveCrimeWork(props.sleeve.currentWork)) {

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 "tss-react/mui";
-import makeStyles from "@mui/styles/makeStyles";
 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) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  active: {
-    active: {
+    borderLeft: "3px solid " + theme.palette.primary.main,
-      borderLeft: "3px solid " + theme.palette.primary.main,
+  },
-    },
+  listitem: {},
-    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) => {

src/Terminal/commands/ls.tsx

@@ -7,8 +7,7 @@ import type { ProgramFilePath } from "../../Paths/ProgramFilePath";
 import type { ContentFilePath } from "../../Paths/ContentFile";
 import type { ScriptFilePath } from "../../Paths/ScriptFilePath";
 
-import createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
-import makeStyles from "@mui/styles/makeStyles";
 import { BaseServer } from "../../Server/BaseServer";
 import { Router } from "../../ui/GameRoot";
 import { Page } from "../../ui/Router";
@@ -109,7 +108,7 @@ export function ls(args: (string | number | boolean)[], server: BaseServer): voi
   folders.sort();
 
   function SegmentGrid(props: { colSize: string; children: React.ReactChild[] }): React.ReactElement {
-    const classes = makeStyles({
+    const { classes } = makeStyles()({
       segmentGrid: {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, var(--colSize))",
@@ -123,15 +122,13 @@ export function ls(args: (string | number | boolean)[], server: BaseServer): voi
     );
   }
   function ClickableContentFileLink(props: { path: ScriptFilePath | TextFilePath }): React.ReactElement {
-    const classes = makeStyles((theme: Theme) =>
+    const { classes } = makeStyles()((theme: Theme) => ({
-      createStyles({
+      link: {
-        link: {
+        cursor: "pointer",
-          cursor: "pointer",
+        textDecorationLine: "underline",
-          textDecorationLine: "underline",
+        color: theme.palette.warning.main,
-          color: theme.palette.warning.main,
+      },
-        },
+    }))();
-      }),
-    )();
     const fullPath = combinePath(baseDirectory, props.path);
     function onClick() {
       let content;
@@ -155,7 +152,7 @@ export function ls(args: (string | number | boolean)[], server: BaseServer): voi
   }
 
   function ClickableMessageLink(props: { path: FilePath }): React.ReactElement {
-    const classes = makeStyles({
+    const { classes } = makeStyles()({
       link: {
         cursor: "pointer",
         textDecorationLine: "underline",

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) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  input: {
-    input: {
+    backgroundColor: theme.colors.backgroundprimary,
-      backgroundColor: theme.colors.backgroundprimary,
+  },
-    },
+  nopadding: {
-    nopadding: {
+    padding: theme.spacing(0),
-      padding: theme.spacing(0),
+  },
-    },
+  preformatted: {
-    preformatted: {
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+  },
-    },
+  absolute: {
-    absolute: {
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+    position: "absolute",
-      position: "absolute",
+    bottom: "12px",
-      bottom: "12px",
+    opacity: "0.75",
-      opacity: "0.75",
+    maxWidth: "100%",
-      maxWidth: "100%",
+    whiteSpace: "pre",
-      whiteSpace: "pre",
+    overflow: "hidden",
-      overflow: "hidden",
+    pointerEvents: "none",
-      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) {

src/Terminal/ui/TerminalRoot.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Link as MuiLink, Typography } from "@mui/material";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 import _ from "lodash";
 
 import { Output, Link, RawOutput } from "../OutputTypes";
@@ -16,27 +15,25 @@ import { ANSIITypography } from "../../ui/React/ANSIITypography";
 import { useRerender } from "../../ui/React/hooks";
 import { TerminalActionTimer } from "./TerminalActionTimer";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  container: {
-    container: {
+    display: "flex",
-      display: "flex",
+    flexDirection: "column",
-      flexDirection: "column",
+    height: "calc(100vh - 16px)",
-      height: "calc(100vh - 16px)",
+  },
-    },
+  entries: {
-    entries: {
+    padding: 0,
-      padding: 0,
+    overflow: "scroll",
-      overflow: "scroll",
+    flex: "0 1 auto",
-      flex: "0 1 auto",
+    margin: "auto 0 0",
-      margin: "auto 0 0",
+  },
-    },
+  preformatted: {
-    preformatted: {
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
-      overflowWrap: "anywhere",
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+    width: "100%",
-      width: "100%",
+  },
-    },
+}));
-  }),
-);
 
 export function TerminalRoot(): React.ReactElement {
   const scrollHook = useRef<HTMLUListElement>(null);
@@ -82,7 +79,7 @@ export function TerminalRoot(): React.ReactElement {
     };
   }, []);
 
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <div className={classes.container}>
       <ul key={key} id="terminal" className={classes.entries} ref={scrollHook}>

src/ui/ActiveScripts/RecentScriptAccordion.tsx

@@ -16,8 +16,7 @@ import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-
 import Collapse from "@mui/material/Collapse";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
@@ -29,7 +28,7 @@ import { MoneyRate } from "../React/MoneyRate";
 import { RecentScript } from "../../Netscript/RecentScripts";
 import { LogBoxEvents } from "../React/LogBoxManager";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   noborder: {
     borderBottom: "none",
   },
@@ -40,7 +39,7 @@ interface IProps {
 }
 
 export function RecentScriptAccordion(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [open, setOpen] = React.useState(false);
   const recentScript = props.recentScript;
 

src/ui/ActiveScripts/ScriptProduction.tsx

@@ -11,28 +11,25 @@ import { Player } from "@player";
 import Typography from "@mui/material/Typography";
 
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  cell: {
-    cell: {
+    borderBottom: "none",
-      borderBottom: "none",
+    padding: theme.spacing(1),
-      padding: theme.spacing(1),
+    margin: theme.spacing(1),
-      margin: theme.spacing(1),
+    whiteSpace: "nowrap",
-      whiteSpace: "nowrap",
+  },
-    },
+  size: {
-    size: {
+    width: "1px",
-      width: "1px",
+  },
-    },
+}));
-  }),
-);
 export function ScriptProduction(): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const prodRateSinceLastAug = Player.scriptProdSinceLastAug / (Player.playtimeSinceLastAug / 1000);
 
   return (

src/ui/ActiveScripts/WorkerScriptAccordion.tsx

@@ -18,7 +18,7 @@ import IconButton from "@mui/material/IconButton";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
 import Collapse from "@mui/material/Collapse";
 import ExpandLess from "@mui/icons-material/ExpandLess";
@@ -34,7 +34,7 @@ import { arrayToString } from "../../utils/helpers/ArrayHelpers";
 import { Money } from "../React/Money";
 import { MoneyRate } from "../React/MoneyRate";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   noborder: {
     borderBottom: "none",
   },
@@ -45,7 +45,7 @@ interface IProps {
 }
 
 export function WorkerScriptAccordion(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [open, setOpen] = React.useState(false);
   const workerScript = props.workerScript;
   const scriptRef = workerScript.scriptRef;

src/ui/GameRoot.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { createStyles, makeStyles } from "@mui/styles";
 import { Box, Typography } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { makeStyles } from "tss-react/mui";
 
 import { Player } from "@player";
 import { installAugmentations } from "../Augmentation/AugmentationHelpers";
@@ -75,25 +75,21 @@ import { GoRoot } from "../Go/ui/GoRoot";
 
 const htmlLocation = location;
 
-const useStyles = makeStyles(
+const useStyles = makeStyles()((theme: Theme) => ({
-  (theme: Theme) =>
+  root: {
-    createStyles({
+    "-ms-overflow-style": "none" /* for Internet Explorer, Edge */,
-      root: {
+    "scrollbar-width": "none" /* for Firefox */,
-        "-ms-overflow-style": "none" /* for Internet Explorer, Edge */,
+    margin: theme.spacing(0),
-        "scrollbar-width": "none" /* for Firefox */,
+    flexGrow: 1,
-        margin: theme.spacing(0),
+    padding: "8px",
-        flexGrow: 1,
+    minHeight: "100vh",
-        padding: "8px",
+    boxSizing: "border-box",
-        minHeight: "100vh",
+    width: "1px",
-        boxSizing: "border-box",
+  },
-        width: "1px",
+}));
-      },
-    }),
-  { name: "GameRoot" },
-);
 
 const uninitialized = (): void => {
-  throw new Error("Router called before initialization");
+  throw new Error("Router called before initialization - uninitialized");
 };
 
 const MAX_PAGES_IN_HISTORY = 10;
@@ -101,14 +97,14 @@ const MAX_PAGES_IN_HISTORY = 10;
 export let Router: IRouter = {
   isInitialized: false,
   page: () => {
-    throw new Error("Router called before initialization");
+    throw new Error("Router called before initialization - page");
   },
   allowRouting: uninitialized,
   toPage: () => {
-    throw new Error("Router called before initialization");
+    throw new Error("Router called before initialization - toPage");
   },
   back: () => {
-    throw new Error("Router called before initialization");
+    throw new Error("Router called before initialization - back");
   },
 };
 
@@ -119,7 +115,7 @@ function determineStartPage() {
 }
 
 export function GameRoot(): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const [pages, setPages] = useState<PageWithContext[]>(() => [{ page: determineStartPage() }]);
   const pageWithContext = pages[0];

src/ui/InteractiveTutorial/InteractiveTutorialRoot.tsx

@@ -14,8 +14,7 @@ import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import StorageIcon from "@mui/icons-material/Storage";
 import LocationCityIcon from "@mui/icons-material/LocationCity";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
 import {
   iTutorialPrevStep,
@@ -31,20 +30,18 @@ interface IContent {
   canNext: boolean;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  textfield: {
-    textfield: {
+    borderBottom: "1px solid " + theme.palette.primary.main,
-      borderBottom: "1px solid " + theme.palette.primary.main,
+  },
-    },
+  code: {
-    code: {
+    whiteSpace: "pre",
-      whiteSpace: "pre",
+    backgroundColor: theme.palette.background.paper,
-      backgroundColor: theme.palette.background.paper,
+  },
-    },
+}));
-  }),
-);
 
 export function InteractiveTutorialRoot(): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const rerender = useRerender();
 
   const tutorialScriptName = `n00dles.js`;

src/ui/MD/code.tsx

@@ -2,30 +2,27 @@ import React from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { monokaiSublime as theme } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
 import { CodeProps } from "react-markdown/lib/ast-to-react";
 import { Typography } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  pre: {
-    pre: {
+    borderRadius: "6px",
-      borderRadius: "6px",
+  },
-    },
+  code: {
-    code: {
+    paddingBottom: "2.72px",
-      paddingBottom: "2.72px",
+    paddingLeft: "5.44px",
-      paddingLeft: "5.44px",
+    paddingRight: "5.44px",
-      paddingRight: "5.44px",
+    paddingTop: "2.72px",
-      paddingTop: "2.72px",
+    borderRadius: "6px",
-      borderRadius: "6px",
+    display: "inline",
-      display: "inline",
+    backgroundColor: theme.palette.background.paper,
-      backgroundColor: theme.palette.background.paper,
+  },
-    },
+}));
-  }),
-);
 
 export const Pre = (props: React.PropsWithChildren<object>): React.ReactElement => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <Typography component="span" classes={{ root: classes.pre }}>
       {props.children}
@@ -34,7 +31,7 @@ export const Pre = (props: React.PropsWithChildren<object>): React.ReactElement
 };
 
 const InlineCode = (props: React.PropsWithChildren<CodeProps>): React.ReactElement => (
-  <Typography component="span" classes={{ root: useStyles().code }}>
+  <Typography component="span" classes={{ root: useStyles().classes.code }}>
     {props.children}
   </Typography>
 );

src/ui/MD/components.tsx

@@ -1,23 +1,19 @@
 import React from "react";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
 import { ListItemText, Table, TableCell, TableCellProps, TableRow, Typography } from "@mui/material";
 import { LiProps, TableDataCellProps, TableHeaderCellProps } from "react-markdown/lib/ast-to-react";
-
+import { makeStyles } from "tss-react/mui";
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  th: { whiteSpace: "pre", fontWeight: "bold" },
-    th: { whiteSpace: "pre", fontWeight: "bold" },
+  td: { whiteSpace: "pre" },
-    td: { whiteSpace: "pre" },
+  blockquote: {
-    blockquote: {
+    borderLeftColor: theme.palette.background.paper,
-      borderLeftColor: theme.palette.background.paper,
+    borderLeftStyle: "solid",
-      borderLeftStyle: "solid",
+    borderLeftWidth: "4px",
-      borderLeftWidth: "4px",
+    paddingLeft: "16px",
-      paddingLeft: "16px",
+    paddingRight: "16px",
-      paddingRight: "16px",
+  },
-    },
+}));
-  }),
-);
 
 export const h1 = (props: React.PropsWithChildren<object>): React.ReactElement => (
   // We are just going to cheat and lower every h# by 1.
@@ -78,7 +74,7 @@ const fixAlign = (align: React.CSSProperties["textAlign"]): TableCellProps["alig
 };
 
 export const Td = (props: React.PropsWithChildren<TableDataCellProps>): React.ReactElement => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const align = fixAlign(props.style?.textAlign);
   const content = props.children?.map((child, i) => {
     if (child === "<br />") return <br key={i} />;
@@ -94,7 +90,7 @@ export const Td = (props: React.PropsWithChildren<TableDataCellProps>): React.Re
 };
 
 export const Th = (props: React.PropsWithChildren<TableHeaderCellProps>): React.ReactElement => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const align = fixAlign(props.style?.textAlign);
 
   return (
@@ -115,6 +111,6 @@ export const tr = (props: React.PropsWithChildren<object>): React.ReactElement =
 };
 
 export const Blockquote = (props: React.PropsWithChildren<object>): React.ReactElement => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return <blockquote className={classes.blockquote}>{props.children}</blockquote>;
 };

src/ui/React/ANSIITypography.tsx

@@ -1,7 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 import { Theme } from "@mui/material/styles";
 import { Settings } from "../../Settings/Settings";
 
@@ -10,45 +9,43 @@ import { Settings } from "../../Settings/Settings";
 // eslint-disable-next-line no-control-regex
 const ANSI_ESCAPE = new RegExp("\u{001b}\\[(?<code>.*?)m", "ug");
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  success: {
-    success: {
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
-      overflowWrap: "anywhere",
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+    color: theme.colors.success,
-      color: theme.colors.success,
+    "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
-      "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
+  },
-    },
+  error: {
-    error: {
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
-      overflowWrap: "anywhere",
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+    color: theme.palette.error.main,
-      color: theme.palette.error.main,
+    "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
-      "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
+  },
-    },
+  primary: {
-    primary: {
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
-      overflowWrap: "anywhere",
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+    color: theme.palette.primary.main,
-      color: theme.palette.primary.main,
+    "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
-      "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
+  },
-    },
+  info: {
-    info: {
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
-      overflowWrap: "anywhere",
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+    color: theme.palette.info.main,
-      color: theme.palette.info.main,
+    "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
-      "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
+  },
-    },
+  warning: {
-    warning: {
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
-      overflowWrap: "anywhere",
+    margin: theme.spacing(0),
-      margin: theme.spacing(0),
+    color: theme.palette.warning.main,
-      color: theme.palette.warning.main,
+    "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
-      "--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
+  },
-    },
+}));
-  }),
-);
 
 const lineClass = (classes: Record<string, string>, s: string): string => {
   const lineClassMap: Record<string, string> = {
@@ -67,7 +64,7 @@ type ANSIITypographyProps = {
 
 export const ANSIITypography = React.memo(function ANSIITypography(props: ANSIITypographyProps): React.ReactElement {
   const text = String(props.text);
-  const classes = useStyles();
+  const { classes } = useStyles();
   const parts = [];
 
   // Build a look-alike regex match to place at the front of the matches list

src/ui/React/Augmentation.tsx

@@ -1,17 +1,14 @@
 import * as React from "react";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  aug: {
-    aug: {
+    color: theme.colors.combat,
-      color: theme.colors.combat,
+  },
-    },
+}));
-  }),
-);
 
 export function Augmentation({ name }: { name: string }): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return <span className={classes.aug}>{name}</span>;
 }

src/ui/React/CharacterOverview.tsx

@@ -6,8 +6,7 @@ import { Box, Button, IconButton, Table, TableBody, TableCell, TableRow, Tooltip
 import SaveIcon from "@mui/icons-material/Save";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import { Theme, useTheme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
 import { Player } from "@player";
 import { formatHp, formatMoney, formatSkill } from "../formatNumber";
@@ -129,7 +128,7 @@ interface DataRowProps {
   cellType: "cellNone" | "cell";
 }
 export function DataRow({ name, showBar, color, cellType }: DataRowProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const isSkill = name in skillNameMap;
   const skillBar = showBar && isSkill ? <SkillBar name={name as SkillRowName} color={color} /> : <></>;
   return (
@@ -171,7 +170,7 @@ export function CharacterOverview({ parentOpen, save, killScripts }: OverviewPro
     }, 600);
     return () => clearInterval(interval);
   }, [parentOpen]);
-  const classes = useStyles();
+  const { classes } = useStyles();
   const theme = useTheme();
   return (
     <>
@@ -243,7 +242,7 @@ function ActionText({ action }: { action: ActionIdentifier }): React.ReactElemen
 }
 
 function BladeburnerText(): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const rerender = useRerender();
   useEffect(() => {
     const clearSubscription = OverviewEventEmitter.subscribe(rerender);
@@ -284,7 +283,7 @@ const onClickFocusWork = (): void => {
   Router.toPage(Page.Work);
 };
 function WorkInProgressOverview({ tooltip, children, header }: WorkInProgressOverviewProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <>
       <TableRow>
@@ -409,52 +408,50 @@ function Work(): React.ReactElement {
   );
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  workCell: {
-    workCell: {
+    textAlign: "center",
-      textAlign: "center",
+    maxWidth: "200px",
-      maxWidth: "200px",
+    borderBottom: "none",
-      borderBottom: "none",
+    padding: 0,
-      padding: 0,
+    margin: 0,
-      margin: 0,
+  },
-    },
 
-    workHeader: {
+  workHeader: {
-      fontSize: "0.9rem",
+    fontSize: "0.9rem",
-    },
+  },
 
-    workSubtitles: {
+  workSubtitles: {
-      fontSize: "0.8rem",
+    fontSize: "0.8rem",
-    },
+  },
 
-    cellNone: {
+  cellNone: {
-      borderBottom: "none",
+    borderBottom: "none",
-      padding: 0,
+    padding: 0,
-      margin: 0,
+    margin: 0,
-    },
+  },
-    cell: {
+  cell: {
-      padding: 0,
+    padding: 0,
-      margin: 0,
+    margin: 0,
-    },
+  },
-    hp: {
+  hp: {
-      color: theme.colors.hp,
+    color: theme.colors.hp,
-    },
+  },
-    money: {
+  money: {
-      color: theme.colors.money,
+    color: theme.colors.money,
-    },
+  },
-    hack: {
+  hack: {
-      color: theme.colors.hack,
+    color: theme.colors.hack,
-    },
+  },
-    combat: {
+  combat: {
-      color: theme.colors.combat,
+    color: theme.colors.combat,
-    },
+  },
-    cha: {
+  cha: {
-      color: theme.colors.cha,
+    color: theme.colors.cha,
-    },
+  },
-    int: {
+  int: {
-      color: theme.colors.int,
+    color: theme.colors.int,
-    },
+  },
-  }),
+}));
-);
 
 export { useStyles };

src/ui/React/Constants.ts

@@ -0,0 +1 @@
+export const logBoxBaseZIndex = 1500;

src/ui/React/Favor.tsx

@@ -1,18 +1,15 @@
 import * as React from "react";
 import { formatFavor } from "../formatNumber";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  favor: {
-    favor: {
+    color: theme.colors.rep,
-      color: theme.colors.rep,
+  },
-    },
+}));
-  }),
-);
 
 export function Favor({ favor }: { favor: number | string }): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return <span className={classes.favor}>{typeof favor === "number" ? formatFavor(favor) : favor}</span>;
 }

src/ui/React/Hashes.tsx

@@ -1,18 +1,15 @@
 import * as React from "react";
 import { formatHashes } from "../formatNumber";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  money: {
-    money: {
+    color: theme.colors.money,
-      color: theme.colors.money,
+  },
-    },
+}));
-  }),
-);
 
 export function Hashes({ hashes }: { hashes: number | string }): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return <span className={classes.money}>{typeof hashes === "number" ? formatHashes(hashes) : hashes}</span>;
 }

src/ui/React/ImportSave/ImportSave.tsx

@@ -15,8 +15,7 @@ import TableCell from "@mui/material/TableCell";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 import { Theme } from "@mui/material/styles";
 
 import WarningIcon from "@mui/icons-material/Warning";
@@ -41,50 +40,48 @@ import { ComparisonIcon } from "./ComparisonIcon";
 import { SaveData } from "../../../types";
 import { handleGetSaveDataError } from "../../../Netscript/ErrorMessages";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  root: {
-    root: {
+    padding: theme.spacing(2),
-      padding: theme.spacing(2),
+    maxWidth: "1000px",
-      maxWidth: "1000px",
+
+    "& .MuiTable-root": {
+      "& .MuiTableCell-root": {
+        borderBottom: `1px solid ${Settings.theme.welllight}`,
+      },
+
+      "& .MuiTableHead-root .MuiTableRow-root": {
+        backgroundColor: Settings.theme.backgroundsecondary,
 
-      "& .MuiTable-root": {
         "& .MuiTableCell-root": {
-          borderBottom: `1px solid ${Settings.theme.welllight}`,
+          color: Settings.theme.primary,
+          fontWeight: "bold",
         },
+      },
 
-        "& .MuiTableHead-root .MuiTableRow-root": {
+      "& .MuiTableBody-root": {
+        "& .MuiTableRow-root:nth-of-type(odd)": {
+          backgroundColor: Settings.theme.well,
+
+          "& .MuiTableCell-root": {
+            color: Settings.theme.primarylight,
+          },
+        },
+        "& .MuiTableRow-root:nth-of-type(even)": {
           backgroundColor: Settings.theme.backgroundsecondary,
 
           "& .MuiTableCell-root": {
-            color: Settings.theme.primary,
+            color: Settings.theme.primarylight,
-            fontWeight: "bold",
-          },
-        },
-
-        "& .MuiTableBody-root": {
-          "& .MuiTableRow-root:nth-of-type(odd)": {
-            backgroundColor: Settings.theme.well,
-
-            "& .MuiTableCell-root": {
-              color: Settings.theme.primarylight,
-            },
-          },
-          "& .MuiTableRow-root:nth-of-type(even)": {
-            backgroundColor: Settings.theme.backgroundsecondary,
-
-            "& .MuiTableCell-root": {
-              color: Settings.theme.primarylight,
-            },
           },
         },
       },
     },
+  },
 
-    skillTitle: {
+  skillTitle: {
-      textTransform: "capitalize",
+    textTransform: "capitalize",
-    },
+  },
-  }),
+}));
-);
 
 // TODO: move to game constants and/or extract as an enum
 const playerSkills: (keyof Skills)[] = ["hacking", "strength", "defense", "dexterity", "agility", "charisma"];
@@ -92,7 +89,7 @@ const playerSkills: (keyof Skills)[] = ["hacking", "strength", "defense", "dexte
 let initialAutosave = 0;
 
 export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): JSX.Element => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [importData, setImportData] = useState<ImportData | undefined>();
   const [currentData, setCurrentData] = useState<ImportData | undefined>();
   const [isImportModalOpen, { on: openImportModal, off: closeImportModal }] = useBoolean(false);

src/ui/React/LogBoxManager.tsx

@@ -2,14 +2,14 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"
 import { EventEmitter } from "../../utils/EventEmitter";
 import { RunningScript } from "../../Script/RunningScript";
 import { killWorkerScriptByPid } from "../../Netscript/killWorkerScript";
+
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
+
 import Draggable, { DraggableEvent } from "react-draggable";
 import { ResizableBox, ResizeCallbackData } from "react-resizable";
 import IconButton from "@mui/material/IconButton";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import CloseIcon from "@mui/icons-material/Close";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -25,7 +25,8 @@ import { Settings } from "../../Settings/Settings";
 import { ANSIITypography } from "./ANSIITypography";
 import { useRerender } from "./hooks";
 import { dialogBoxCreate } from "./DialogBox";
-
+import { makeStyles } from "tss-react/mui";
+import { logBoxBaseZIndex } from "./Constants";
 let layerCounter = 0;
 
 export const LogBoxEvents = new EventEmitter<[RunningScript]>();
@@ -143,33 +144,29 @@ interface LogWindowProps {
   hidden: boolean;
 }
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles()({
-  createStyles({
+  logs: {
-    logs: {
+    overflowY: "scroll",
-      overflowY: "scroll",
+    overflowX: "hidden",
-      overflowX: "hidden",
+    scrollbarWidth: "auto",
-      scrollbarWidth: "auto",
+    flexDirection: "column-reverse",
-      flexDirection: "column-reverse",
+    whiteSpace: "pre-wrap",
-      whiteSpace: "pre-wrap",
+    wordWrap: "break-word",
-      wordWrap: "break-word",
+  },
-    },
+  titleButton: {
-    titleButton: {
+    borderWidth: "0 0 0 1px",
-      borderWidth: "0 0 0 1px",
+    borderColor: Settings.theme.welllight,
-      borderColor: Settings.theme.welllight,
+    borderStyle: "solid",
-      borderStyle: "solid",
+    borderRadius: "0",
-      borderRadius: "0",
+    padding: "0",
-      padding: "0",
+    height: "100%",
-      height: "100%",
+  },
-    },
+});
-  }),
-);
-
-export const logBoxBaseZIndex = 1500;
 
 function LogWindow({ hidden, script, onClose }: LogWindowProps): React.ReactElement {
   const draggableRef = useRef<HTMLDivElement>(null);
   const rootRef = useRef<Draggable>(null);
-  const classes = useStyles();
+  const { classes } = useStyles();
   const container = useRef<HTMLDivElement>(null);
   const textArea = useRef<HTMLDivElement>(null);
   const rerender = useRerender(Settings.TailRenderInterval);

src/ui/React/Modal.tsx

@@ -4,42 +4,39 @@ import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Fade from "@mui/material/Fade";
 import M from "@mui/material/Modal";
-import createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
-import makeStyles from "@mui/styles/makeStyles";
 import { SxProps } from "@mui/system";
 import CloseIcon from "@mui/icons-material/Close";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  modal: {
-    modal: {
+    display: "flex",
-      display: "flex",
+    alignItems: "center",
-      alignItems: "center",
+    justifyContent: "center",
-      justifyContent: "center",
+  },
+  paper: {
+    position: "relative",
+    backgroundColor: theme.palette.background.default,
+    border: "2px solid " + theme.palette.primary.main,
+    boxShadow: `0px 3px 5px -1px ${theme.palette.primary.dark},0px 5px 8px 0px ${theme.palette.primary.dark},0px 1px 14px 0px ${theme.palette.primary.dark}`,
+    padding: 2,
+    maxWidth: "80%",
+    maxHeight: "80%",
+    overflow: "auto",
+    "&::-webkit-scrollbar": {
+      // webkit
+      display: "none",
     },
-    paper: {
+    scrollbarWidth: "none", // firefox
-      position: "relative",
+  },
-      backgroundColor: theme.palette.background.default,
+  closeButton: {
-      border: "2px solid " + theme.palette.primary.main,
+    position: "absolute",
-      boxShadow: `0px 3px 5px -1px ${theme.palette.primary.dark},0px 5px 8px 0px ${theme.palette.primary.dark},0px 1px 14px 0px ${theme.palette.primary.dark}`,
+    right: 3,
-      padding: 2,
+    top: 3,
-      maxWidth: "80%",
+    width: 20,
-      maxHeight: "80%",
+    height: 20,
-      overflow: "auto",
+  },
-      "&::-webkit-scrollbar": {
+}));
-        // webkit
-        display: "none",
-      },
-      scrollbarWidth: "none", // firefox
-    },
-    closeButton: {
-      position: "absolute",
-      right: 3,
-      top: 3,
-      width: 20,
-      height: 20,
-    },
-  }),
-);
 
 interface ModalProps {
   open: boolean;
@@ -49,7 +46,7 @@ interface ModalProps {
 }
 
 export const Modal = ({ open, onClose, children, sx }: ModalProps): React.ReactElement => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const [content, setContent] = useState(children);
   useEffect(() => {
     if (!open) return;

src/ui/React/Money.tsx

@@ -2,26 +2,23 @@ import * as React from "react";
 import { formatMoney } from "../formatNumber";
 import { Player } from "@player";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  unbuyable: {
-    unbuyable: {
+    color: theme.palette.action.disabled,
-      color: theme.palette.action.disabled,
+  },
-    },
+  money: {
-    money: {
+    color: theme.colors.money,
-      color: theme.colors.money,
+  },
-    },
+}));
-  }),
-);
 
 interface IProps {
   money: number | string;
   forPurchase?: boolean;
 }
 export function Money(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   if (props.forPurchase) {
     if (typeof props.money !== "number")
       throw new Error("if value is for a purchase, money should be number, contact dev");

src/ui/React/Overview.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import Draggable, { DraggableEventHandler } from "react-draggable";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import Collapse from "@mui/material/Collapse";
 import Paper from "@mui/material/Paper";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
@@ -13,7 +13,7 @@ import { Settings } from "../../Settings/Settings";
 import { Box, Button, Typography } from "@mui/material";
 import { debounce } from "lodash";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   overviewContainer: {
     position: "fixed",
     top: 0,
@@ -68,7 +68,7 @@ export function Overview({ children, mode }: IProps): React.ReactElement {
   const [open, setOpen] = useState(Settings.overview.opened);
   const [x, setX] = useState(Settings.overview.x);
   const [y, setY] = useState(Settings.overview.y);
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const CurrentIcon = open ? KeyboardArrowUpIcon : KeyboardArrowDownIcon;
   const LeftIcon = mode === "tutorial" ? SchoolIcon : EqualizerIcon;

src/ui/React/Progress.tsx

@@ -1,8 +1,8 @@
 import LinearProgress from "@mui/material/LinearProgress";
 import { Theme } from "@mui/material/styles";
-import withStyles from "@mui/styles/withStyles";
+import { withStyles } from "tss-react/mui";
 
-export const ProgressBar = withStyles((theme: Theme) => ({
+export const ProgressBar = withStyles(LinearProgress, (theme: Theme) => ({
   root: {
     backgroundColor: theme.palette.background.paper,
   },
@@ -10,4 +10,4 @@ export const ProgressBar = withStyles((theme: Theme) => ({
     transition: "none",
     backgroundColor: theme.palette.primary.main,
   },
-}))(LinearProgress);
+}));

src/ui/React/Reputation.tsx

@@ -1,19 +1,16 @@
 import * as React from "react";
 import { formatReputation } from "../formatNumber";
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
-import createStyles from "@mui/styles/createStyles";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  reputation: {
-    reputation: {
+    color: theme.colors.rep,
-      color: theme.colors.rep,
+  },
-    },
+}));
-  }),
-);
 
 export function Reputation({ reputation }: { reputation: number | string }): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <span className={classes.reputation}>
       {typeof reputation === "number" ? formatReputation(reputation) : reputation}

src/ui/React/Snackbar.tsx

@@ -2,17 +2,16 @@ import type { ToastVariant } from "@enums";
 
 import React, { useEffect } from "react";
 import { useSnackbar, SnackbarProvider as SB } from "notistack";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import { EventEmitter } from "../../utils/EventEmitter";
 import Alert from "@mui/material/Alert";
 import Paper from "@mui/material/Paper";
-import { logBoxBaseZIndex } from "./LogBoxManager";
+import { logBoxBaseZIndex } from "./Constants";
 
 interface IProps {
   children: React.ReactNode | React.ReactNode[];
 }
-
+const useStyles = makeStyles()({
-const useStyles = makeStyles(() => ({
   snackbar: {
     // Log popup z-index increments, so let's add a padding to be well above them.
     zIndex: `${logBoxBaseZIndex + 1000} !important` as any,
@@ -21,10 +20,10 @@ const useStyles = makeStyles(() => ({
       alignSelf: "center",
     },
   },
-}));
+});
 
 export function SnackbarProvider(props: IProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <SB
       dense

src/ui/React/StatsProgressBar.tsx

@@ -54,7 +54,7 @@ export function StatsProgressBar({
 }
 
 export function StatsProgressOverviewCell({ progress: skill, color }: IStatsOverviewCellProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <TableCell
       component="th"

src/ui/React/StatsRow.tsx

@@ -19,7 +19,7 @@ interface IProps {
 }
 
 export const StatsRow = ({ name, color, children, data }: IProps): React.ReactElement => {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   let content = "";
   if (data) {

src/ui/React/StatsTable.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, ReactElement } from "react";
 
 import { Table, TableCell } from "./Table";
 import { TableBody, TableRow, Table as MuiTable, Typography } from "@mui/material";
-import { makeStyles } from "@mui/styles";
+import { makeStyles } from "tss-react/mui";
 
 interface StatsTableProps {
   rows: ReactNode[][];
@@ -12,14 +12,14 @@ interface StatsTableProps {
 }
 
 const useStyles = (paddingLeft: string) =>
-  makeStyles({
+  makeStyles()({
     firstCell: { textAlign: "left" },
     nonFirstCell: { textAlign: "right", paddingLeft: paddingLeft },
   })();
 
 export function StatsTable({ rows, title, wide, paddingLeft }: StatsTableProps): ReactElement {
   const T = wide ? MuiTable : Table;
-  const classes = useStyles(paddingLeft ?? "0.5em");
+  const { classes } = useStyles(paddingLeft ?? "0.5em");
   return (
     <>
       {title && <Typography>{title}</Typography>}

src/ui/React/Table.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { TableCell as MuiTableCell, TableCellProps, Table as MuiTable, TableProps } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   root: {
     borderBottom: "none",
   },
@@ -17,7 +17,7 @@ export const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
     <MuiTableCell
       {...props}
       classes={{
-        root: useStyles().root,
+        root: useStyles().classes.root,
         ...props.classes,
       }}
     />
@@ -29,7 +29,7 @@ export const Table: React.FC<TableProps> = (props: TableProps) => {
     <MuiTable
       {...props}
       classes={{
-        root: useStyles().small,
+        root: useStyles().classes.small,
         ...props.classes,
       }}
     />

src/ui/React/WorldMap.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { createStyles, makeStyles } from "@mui/styles";
+import { makeStyles } from "tss-react/mui";
 import { Tooltip, Typography } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 
@@ -11,24 +11,22 @@ interface ICityProps {
   onTravel: (city: CityName) => void;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles()((theme: Theme) => ({
-  createStyles({
+  travel: {
-    travel: {
+    color: theme.colors.maplocation,
-      color: theme.colors.maplocation,
+    lineHeight: "1em",
-      lineHeight: "1em",
+    whiteSpace: "pre",
-      whiteSpace: "pre",
+    cursor: "pointer",
-      cursor: "pointer",
+  },
-    },
+  currentCity: {
-    currentCity: {
+    color: theme.colors.disabled,
-      color: theme.colors.disabled,
+    lineHeight: "1em",
-      lineHeight: "1em",
+    whiteSpace: "pre",
-      whiteSpace: "pre",
+  },
-    },
+}));
-  }),
-);
 
 function City(props: ICityProps): React.ReactElement {
-  const classes = useStyles();
+  const { classes } = useStyles();
   if (props.city !== props.currentCity) {
     return (
       <Tooltip title={<Typography>{props.city}</Typography>}>