测试：

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

JavaScript 示例：

我的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
    )
}

我的component.styles.js

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

typescript示例：

我的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
    )
}

我的component.interfaces.ts

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

export interface MyComponentProps {
}

我的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,
    }),
}));

更新

重新测试

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

您需要将对象传递给useStyles而不是字符串。

所以而不是：

const classes = useStyles(backgroundColor);

你应该有：

const classes = useStyles(props);

或者

const classes = useStyles({backgroundColor});

然后您可以使用以下方法获得 backgroundColor：

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

这是一个工作示例：https : //codesandbox.io/s/o7xryjnmly

你可以这样做:(我不知道是否是最好的方法但有效......也可以访问主题ang globals provider（使用themeProvider））

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

const useStyles =  makeStyles(theme => (styles(theme))); // here call styles function imported from styles.js
const SideNav = ({drawerState, toggleDrawer}) => {

  const classes = useStyles();

return (
 <Box className={classes.root}>

    <Drawer className="drawer" anchor="left" open={drawerState} onClose={() => toggleDrawer(false)}>
      <NavList></NavList>
    </Drawer>

  </Box>
);


export default SideNav;

并在styles.js

const styles = (theme) => {
return ({
    root: {
        '& .drawer': {
            backgroundColor:'red'
        }
    }
});

}

export default styles;

makeStyles 通过 params 获取主题，因此您可以为每个带有箭头函数的组件创建一个 style.js，并从可以访问主题提供程序的 makeStyles 调用。

我们通常有 2 种模式，您的prop变量是否导入到组件中。

1. 如果你的prop变量是导入的，它是一个全局变量，所以它在 makeStyles() 中是有效的：

     import {prop} from ...
    
     const useStyles = makeStyles((theme) => ({
       className:{
          // use prop
       }
     })
    
     define component...

2. 如果您的prop变量是在组件中定义的（例如状态），您有两种选择：

• 您可以将prop变量传递给 makeStyles()：

    const useStyles = makeStyles((theme,prop) => ({
      className:{
         // use prop
      }
    })
    
    define component...

• 您可以使用箭头函数而无需向 makeStyles() 传递任何参数（主题除外）：

    const useStyles = makeStyles((theme) => ({
      className:(prop)=>({
         //use prop
      })
    })

    define component...