easier replacement for the deprecated mui-styles library

makeStylesMUI5React18.ts

// this code is to make it easier to replace the deprecated mui-styles library, almost drop in
import { SxProps } from '@mui/material'
import { useMemo } from 'react'

type TStylesFunction = (
  props?: any,
) => Record<string, React.CSSProperties | SxProps>
type TStyles = Record<string, React.CSSProperties | SxProps>

export const makeStylesHook = (styles: TStylesFunction | TStyles) => {
  // useStyles returned like deprecated MUI makeStyles
  const useStyles =
    typeof styles === 'function'
      ? (props?: any) => {
          return useMemo(() => styles(props), [props])
        }
      : (_props?: any) => {
          return useMemo(() => styles, [])
        }
  return useStyles
}
  
// use
// const useStyles = makeStylesHook((props) => ({ box: { backgroundColor: "green"}}))
//...
// const Component = () => { 
//   const classes = useStyles()
//   return <Box sx={classes.box} />
// }