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",
-    "remark-math": "^5.1.1",
-    "rehype-mathjax": "^4.0.3"
+    "webpack-dev-server": "^4.15.2"
   },
   "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) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     width: 50,
     padding: theme.spacing(2),
     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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
@@ -12,8 +11,7 @@ import { Settings } from "../../Settings/Settings";
 import Button from "@mui/material/Button";
 import { CompletedProgramName } from "@enums";
 
-const useStyles = makeStyles(() =>
-  createStyles({
+const useStyles = makeStyles()(() => ({
   portal: {
     cursor: "pointer",
     fontFamily: "inherit",
@@ -37,8 +35,7 @@ const useStyles = makeStyles(() =>
   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,16 +5,14 @@ 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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 import { useRerender } from "../../ui/React/hooks";
 
 interface ILineProps {
   content: React.ReactNode;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   textfield: {
     margin: theme.spacing(0),
     width: "100%",
@@ -33,8 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
     padding: theme.spacing(0),
     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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 import Paper from "@mui/material/Paper";
 
 interface Props {
@@ -10,8 +9,7 @@ interface Props {
   hidden?: boolean;
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
+const useStyles = makeStyles()(() => ({
   card: {
     padding: "10px",
     border: "solid 1px #808080",
@@ -34,11 +32,10 @@ const useStyles = makeStyles(() =>
     fontSize: "20px",
     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(() =>
-  createStyles({
+const useStyles = makeStyles()(() => ({
   retainHeight: {
     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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   unbuyable: {
     color: theme.palette.action.disabled,
   },
   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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 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(() =>
-  createStyles({
+const useStyles = makeStyles()({
   noformat: {
     whiteSpace: "pre-wrap",
     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,15 +18,13 @@ 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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
 interface IProps {
   city: City;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   location: {
     color: theme.colors.maplocation,
     whiteSpace: "nowrap",
@@ -34,8 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
     padding: "0px",
     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 "@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({
+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) => {

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 "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 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) =>
-      createStyles({
+    const { classes } = makeStyles()((theme: Theme) => ({
       link: {
         cursor: "pointer",
         textDecorationLine: "underline",
         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,8 +10,7 @@ import { getTabCompletionPossibilities } from "../getTabCompletionPossibilities"
 import { Settings } from "../../Settings/Settings";
 import { longestCommonStart } from "../../utils/StringHelperFunctions";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   input: {
     backgroundColor: theme.colors.backgroundprimary,
   },
@@ -31,8 +30,7 @@ const useStyles = makeStyles((theme: Theme) =>
     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) {

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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 import _ from "lodash";
 
 import { Output, Link, RawOutput } from "../OutputTypes";
@@ -16,8 +15,7 @@ import { ANSIITypography } from "../../ui/React/ANSIITypography";
 import { useRerender } from "../../ui/React/hooks";
 import { TerminalActionTimer } from "./TerminalActionTimer";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -35,8 +33,7 @@ const useStyles = makeStyles((theme: Theme) =>
     margin: theme.spacing(0),
     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,15 +11,13 @@ import { Player } from "@player";
 import Typography from "@mui/material/Typography";
 
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 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) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   cell: {
     borderBottom: "none",
     padding: theme.spacing(1),
@@ -29,10 +27,9 @@ const useStyles = makeStyles((theme: Theme) =>
   size: {
     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,9 +75,7 @@ import { GoRoot } from "../Go/ui/GoRoot";
 
 const htmlLocation = location;
 
-const useStyles = makeStyles(
-  (theme: Theme) =>
-    createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     "-ms-overflow-style": "none" /* for Internet Explorer, Edge */,
     "scrollbar-width": "none" /* for Firefox */,
@@ -88,12 +86,10 @@ const useStyles = makeStyles(
     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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
 import {
   iTutorialPrevStep,
@@ -31,8 +30,7 @@ interface IContent {
   canNext: boolean;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   textfield: {
     borderBottom: "1px solid " + theme.palette.primary.main,
   },
@@ -40,11 +38,10 @@ const useStyles = makeStyles((theme: Theme) =>
     whiteSpace: "pre",
     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,13 +2,11 @@ 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) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   pre: {
     borderRadius: "6px",
   },
@@ -21,11 +19,10 @@ const useStyles = makeStyles((theme: Theme) =>
     display: "inline",
     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,12 +1,9 @@
 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";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+import { makeStyles } from "tss-react/mui";
+const useStyles = makeStyles()((theme: Theme) => ({
   th: { whiteSpace: "pre", fontWeight: "bold" },
   td: { whiteSpace: "pre" },
   blockquote: {
@@ -16,8 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
     paddingLeft: "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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 import { Theme } from "@mui/material/styles";
 import { Settings } from "../../Settings/Settings";
 
@@ -10,8 +9,7 @@ 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) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   success: {
     whiteSpace: "pre-wrap",
     overflowWrap: "anywhere",
@@ -47,8 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
     color: theme.palette.warning.main,
     "--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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   aug: {
     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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
 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,8 +408,7 @@ function Work(): React.ReactElement {
   );
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   workCell: {
     textAlign: "center",
     maxWidth: "200px",
@@ -454,7 +452,6 @@ const useStyles = makeStyles((theme: Theme) =>
   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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   favor: {
     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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 import { Theme } from "@mui/material/styles";
 
 import WarningIcon from "@mui/icons-material/Warning";
@@ -41,8 +40,7 @@ import { ComparisonIcon } from "./ComparisonIcon";
 import { SaveData } from "../../../types";
 import { handleGetSaveDataError } from "../../../Netscript/ErrorMessages";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     padding: theme.spacing(2),
     maxWidth: "1000px",
@@ -83,8 +81,7 @@ const useStyles = makeStyles((theme: Theme) =>
   skillTitle: {
     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,8 +144,7 @@ interface LogWindowProps {
   hidden: boolean;
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
+const useStyles = makeStyles()({
   logs: {
     overflowY: "scroll",
     overflowX: "hidden",
@@ -161,15 +161,12 @@ const useStyles = makeStyles(() =>
     padding: "0",
     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,13 +4,11 @@ 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 "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import { SxProps } from "@mui/system";
 import CloseIcon from "@mui/icons-material/Close";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   modal: {
     display: "flex",
     alignItems: "center",
@@ -38,8 +36,7 @@ const useStyles = makeStyles((theme: Theme) =>
     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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   unbuyable: {
     color: theme.palette.action.disabled,
   },
   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 createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   reputation: {
     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,8 +11,7 @@ interface ICityProps {
   onTravel: (city: CityName) => void;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles()((theme: Theme) => ({
   travel: {
     color: theme.colors.maplocation,
     lineHeight: "1em",
@@ -24,11 +23,10 @@ const useStyles = makeStyles((theme: Theme) =>
     lineHeight: "1em",
     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>}>