Was on MUI4 but now moved to 5 with React 18, and getting errors when installing unless I use --legacy-peer-deps. I would like to replace legacy makeStyles with whatever is best –

• I know there is sx prop which can be tedious and repetitive and defeats the purpose of classes when same class repeats for multiple elements.
• I also know I could create styled components such as a styled Avatar or styled AppBar but what if I don’t need too much customization and just add a few css styles (and sometimes they are not mui components).
• I could add it to a global css but that does not have access to theme variables. Also why load everything in a big global css when only the needed ones can be added to the component.

The code below is an example but there is makeStyles used in a lot of components in my App. Adding sx prop to all of the instances seems like is not the best way. That is as if CSS never had a class property but only had style. There are cases where elements need the same class and are repetitive for example below, there are two instances of div that uses className grow.

How have others solved this and what is the easiest but correct way to remove legacy mui/styles.

const useStyles = makeStyles((theme) => ({
  grow: {
    flexGrow: 1,
  },
  lightMode: {
    backgroundColor: theme.palette.common.white,
    color: theme.palette.common.grey,
    borderBottom: `1px solid ${theme.palette.common.white}`,
  },
}

export default function TopAppBar() {
..
 <div className={classes.grow}>
...
<Box className={classes.lightMode}>
..
 <div className={classes.grow}>
...