refactor(striker-ui): migrate MUI v4->5 on SharedStorage/SharedStorageHost

striker-ui/components/SharedStorage/SharedStorageHost.tsx

@@ -1,20 +1,30 @@
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
-import { makeStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import * as prettyBytes from 'pretty-bytes';
 import { AllocationBar } from '../Bars';
 import { BodyText } from '../Text';
 
-const useStyles = makeStyles(() => ({
+const PREFIX = 'SharedStorageHost';
-  fs: {
+
+const classes = {
+  fs: `${PREFIX}-fs`,
+  bar: `${PREFIX}-bar`,
+  decoratorBox: `${PREFIX}-decoratorBox`,
+};
+
+const StyledDiv = styled('div')(() => ({
+  [`& .${classes.fs}`]: {
     paddingLeft: '.7em',
     paddingRight: '.7em',
     paddingTop: '1.2em',
   },
-  bar: {
+
+  [`& .${classes.bar}`]: {
     paddingLeft: '.7em',
     paddingRight: '.7em',
   },
-  decoratorBox: {
+
+  [`& .${classes.decoratorBox}`]: {
     paddingRight: '.3em',
   },
 }));
@@ -24,9 +34,8 @@ const SharedStorageHost = ({
 }: {
   group: AnvilSharedStorageGroup;
 }): JSX.Element => {
-  const classes = useStyles();
   return (
-    <>
+    <StyledDiv>
       <Box display="flex" width="100%" className={classes.fs}>
         <Box flexGrow={1}>
           <BodyText
@@ -67,7 +76,7 @@ const SharedStorageHost = ({
           )}`}
         />
       </Box>
-    </>
+    </StyledDiv>
   );
 };