fix(striker-ui): resolve MUI breaking changes on Typography

striker-ui/components/Display/FullSize.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, Dispatch, SetStateAction } from 'react';
 import dynamic from 'next/dynamic';
-import { Box, Menu, MenuItem, Typography, Button } from '@material-ui/core';
+import { Box, Menu, MenuItem, Button } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import KeyboardIcon from '@material-ui/icons/Keyboard';

striker-ui/components/Servers.tsx

@@ -9,8 +9,8 @@ import {
   Checkbox,
   Menu,
   MenuItem,
-  Typography,
 } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
 import EditIcon from '@material-ui/icons/Edit';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import CheckIcon from '@material-ui/icons/Check';

striker-ui/components/Text/BodyText.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
 

striker-ui/components/Text/HeaderText.tsx

@@ -1,12 +1,10 @@
-import { Typography } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { TEXT } from '../../lib/consts/DEFAULT_THEME';
 
-const WhiteTypography = withStyles({
+const WhiteTypography = styled(Typography)({
-  root: {
   color: TEXT,
-  },
+});
-})(Typography);
 
 const HeaderText = ({ text }: { text: string }): JSX.Element => {
   return <WhiteTypography variant="h4">{text}</WhiteTypography>;