How to pass multiple props to makeStyles() with TypeScript-CodePudding

I read about how to pass 1 prop to makeStyle() here and came up with the following approach, for my task of passing in 2 props. But error reads cannot find name 'props'. Any help would be much appreciated!

const Foo = ({ bar, color, backgroundColor }) => {
  const classes = useStyles({color, backgroundColor});
  ...
};

type Props = {
  color: string
  backgroundColor: string
}

const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
  createStyles({
    ...BaseTheme(theme),
    main: {
      color: `${props.color}`,
      backgroundColor: `${props.backgroundColor}`,
    },
  }),
);

CodePudding user response：

I think it should be a function with props as a parameter for the main property.

type Props = {
  color: string
  backgroundColor: string
}

const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
  createStyles({
    ...BaseTheme(theme),
    main: (props: Props) => ({
      color: `${props.color}`,
      backgroundColor: `${props.backgroundColor}`,
    }),
  }),
);