how to pass variables to makestyles

1import React from 'react';
2import { makeStyles } from '@material-ui/core/styles';
3import Button from '@material-ui/core/Button';
4import {Theme} from '@material-ui/core';
5
6export interface StyleProps {
7    height: number;
8}
9
10const useStyles = makeStyles<Theme, StyleProps>(theme => ({
11  root: {
12    background: 'green',
13    height: ({height}) => height,
14  },
15}));
16
17export default function Hook() {
18
19  const props = {
20    height: 48
21  }
22
23  const classes = useStyles(props);
24  return <Button className={classes.root}>Styled with Hook API</Button>;
25}

1const useStyles = props => makeStyles( theme => ({
2    div: {
3        width: theme.spacing(props.units || 0)  
4    }
5}));
6
7//calling the function
8const classes = useStyles(props)();

1import React from 'react';
2import { makeStyles } from '@material-ui/core/styles';
3import Button from '@material-ui/core/Button';
4import {Theme} from '@material-ui/core';
5
6const useStyles = makeStyles(theme => ({
7  root: {
8    background: ({color})=> color,
9  },
10}));
11
12export default function Hook() {
13  const props = {
14    color: "#1D3874"
15  }
16  const classes = useStyles(props);
17  return <Button className={classes.root}>Styled with Hook API</Button>;
18}