---

[DewangS]

I've gone through the documentation on the changes around the legacy makeStyle vs the new styled feature though having hard time using the new styled component as it's more like creating each HTML element e.g. div, button, icon as a styled component and use it. For example in my legacy code I had below snippet where I use makeStyles to create styles and use those classes across my functional code. Looking at the new way, it looks like I will have to create style for each element individually which is a LOT of work. I'm aware that I can still use the legacy style by installing the npm install @mui/styles package but other than that is there any easy work around? I've also saw some comments regarding very poor performance of using the legacy style package with MUI v5. Could someone please let me know what approach you've taken to migrate your old material-ui code? Thanks.

import React, { useContext } from "react";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

function Header(props) {
 const classes = useStyles();
const useStyles = makeStyles((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar,
  },
  root: {
    display: "flex",
  },

  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  loginButton: {
    color: "white",
    backgroundColor: theme.palette.primary.main,
    //marginTop: '0.5em',
    //marginBottom: '1em',
    "&:hover": {
      color: "black",
      backgroundColor: "white",
    },
    [theme.breakpoints.down("md")]: {
      marginLeft: "65%",
    },
    [theme.breakpoints.down("sm")]: {
      marginLeft: "50%",
    },
    [theme.breakpoints.down("xs")]: {
      marginLeft: "20%",
    },
  },
  menuButton: {
    "&:hover": {
      color: "black",
      backgroundColor: "white",
    },
    [theme.breakpoints.up("xs")]: {
      display: "block",
    },
    marginRight: theme.spacing(2),
    marginLeft: "10px",
  },
}));

return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={clsx([classes.appBar], {
          [classes.appBarShift]: open,
        })}
      >
        <Toolbar disableGutters>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="open drawer"
            onClick={toggleDrawer}
          >
            <MenuIcon />
          </IconButton>
          <div>
            <MUILink href="https://www.google.com">
              <img
                className={classes.companylogo}
                src={require("../../assets/-logo-white.png")}
                alt="Western Sydney University"
              />
            </MUILink>
          </div>

           <Button
              size="medium"
              className={classes.loginButton}
              startIcon={<LockOpenIcon />}
              onClick={handleLogin}
            >
              LOGIN
            </Button>
 </Toolbar>
      </AppBar>
</div>
)
}

export default Header;

[oliviertassinari]

@DewangS Hi, we are not providing support on GitHub discussion, Stack Overflow would likely be the right place to ask, see https://mui.com/material-ui/getting-started/support/.