How to use 'theme' and 'props' in makeStyles?

Tested with:

"@material-ui/core": "^4.0.0-beta.1",
"@material-ui/styles": "^4.0.0-rc.0",

JavaScript example:

my-component.js

import React from 'react';
import { makeStyles } from '@material-ui/styles';

import { useStyles } from './my-component.styles.js'; 

const myComponent = (props) => {
    const styleProps = { width: '100px', height: '100px' };
    const classes = useStyles(styleProps);

    return (
        <div className={classes.mySelector}></div> // with 100px and height 100px will be applied
    )
}

my-component.styles.js

export const useStyles = makeStyles(theme => ({
    mySelector: props => ({
        display: 'block',
        width: props.width,
        height: props.height,
    }),
}));

---

TypeScript example:

my-component.ts

import React, { FC } from 'react'; 
import { makeStyles } from '@material-ui/styles';

import { useStyles } from './my-component.styles.ts'; 
import { MyComponentProps, StylesProps } from './my-component.interfaces.ts'; 

const myComponent: FC<MyComponentProps> = (props) => {
    const styleProps: StylesProps = { width: '100px', height: '100px' };
    const classes = useStyles(styleProps);

    return (
        <div className={classes.mySelector}></div> // with 100px and height 100px will be applied
    )
}

my-component.interfaces.ts

export interface StyleProps {
    width: string;
    height: string;
}

export interface MyComponentProps {
}

my-component.styles.ts

import { Theme } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';

import { StyleProps } from './my-components.interfaces.ts';

export const useStyles = makeStyles<Theme, StyleProps>((theme: Theme) => ({
    mySelector: props => ({ // props = { width: string; height: string }
        display: 'block',
        width: props.width,
        height: props.height,
    }),
}));

Update

Re-tested with

"@material-ui/core": "^4.12.X"

You need to pass an object to useStyles rather than a string.

So instead of:

const classes = useStyles(backgroundColor);

you should have:

const classes = useStyles(props);

or

const classes = useStyles({backgroundColor});

Then you can get at backgroundColor using:

color: theme.palette.getContrastText(props.backgroundColor).

Here's a working example: https://codesandbox.io/s/o7xryjnmly