refactor(striker-ui): migrate MUI v4->5 on Header

striker-ui/components/Header.tsx

@@ -1,54 +1,66 @@
 import { useState } from 'react';
-import AppBar from '@material-ui/core/AppBar';
-import { makeStyles } from '@material-ui/core/styles';
-import { Box, Button } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import { AppBar, Box, Button } from '@mui/material';
 import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
 import { BORDER_RADIUS, RED } from '../lib/consts/DEFAULT_THEME';
 import AnvilDrawer from './AnvilDrawer';
 
-const useStyles = makeStyles((theme) => ({
-  appBar: {
-    paddingTop: theme.spacing(0.5),
-    paddingBottom: theme.spacing(0.5),
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3),
-    borderBottom: 'solid 1px',
-    borderBottomColor: RED,
-  },
-  input: {
+const PREFIX = 'Header';
+
+const classes = {
+  input: `${PREFIX}-input`,
+  barElement: `${PREFIX}-barElement`,
+  iconBox: `${PREFIX}-iconBox`,
+  searchBar: `${PREFIX}-searchBar`,
+  icons: `${PREFIX}-icons`,
+};
+
+const StyledAppBar = styled(AppBar)(({ theme }) => ({
+  paddingTop: theme.spacing(0.5),
+  paddingBottom: theme.spacing(0.5),
+  paddingLeft: theme.spacing(3),
+  paddingRight: theme.spacing(3),
+  borderBottom: 'solid 1px',
+  borderBottomColor: RED,
+  position: 'static',
+
+  [`& .${classes.input}`]: {
     height: '2.8em',
     width: '30vw',
     backgroundColor: theme.palette.secondary.main,
     borderRadius: BORDER_RADIUS,
   },
-  barElement: {
+
+  [`& .${classes.barElement}`]: {
     padding: 0,
   },
-  iconBox: {
+
+  [`& .${classes.iconBox}`]: {
     [theme.breakpoints.down('sm')]: {
       display: 'none',
     },
   },
-  searchBar: {
+
+  [`& .${classes.searchBar}`]: {
     [theme.breakpoints.down('sm')]: {
       flexGrow: 1,
       paddingLeft: '15vw',
     },
   },
-  icons: {
+
+  [`& .${classes.icons}`]: {
     paddingLeft: '.1em',
     paddingRight: '.1em',
   },
 }));
 
 const Header = (): JSX.Element => {
-  const classes = useStyles();
   const [open, setOpen] = useState(false);
 
   const toggleDrawer = (): void => setOpen(!open);
 
   return (
-    <AppBar position="static" className={classes.appBar}>
+    <StyledAppBar>
       <Box display="flex" justifyContent="space-between" flexDirection="row">
         <Box className={classes.barElement}>
           <Button onClick={toggleDrawer}>
@@ -80,7 +92,7 @@ const Header = (): JSX.Element => {
         </Box>
       </Box>
       <AnvilDrawer open={open} setOpen={setOpen} />
-    </AppBar>
+    </StyledAppBar>
   );
 };