删除了旧答案，因为它没有存在的理由。

这是你想要的：

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

const useStyles = makeStyles({
    firstStyle: {
        backgroundColor: props => props.backgroundColor,
    },
    secondStyle: {
        color: props => props.color,
    },
});

const MyComponent = ({children, ...props}) =>{
    const { firstStyle, secondStyle } = useStyles(props);
    return(
        <div className={`${firstStyle} ${secondStyle}`}>
            {children}
        </div>
    )
}

export default MyComponent;

现在你可以像这样使用它：

<MyComponent color="yellow" backgroundColor="purple">
    Well done
</MyComponent>

官方文档

如何在 Material ui 中同时使用 props 和 theme 的解决方案：

const useStyles = props => makeStyles( theme => ({
    div: {
        width: theme.spacing(props.units || 0)  
    }
}));

export default function ComponentExample({ children, ...props }){
    const { div } = useStyles(props)();
    return (
        <div className={div}>{children}</div>
    );
}

这里的typescript解决方案：

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

export interface StyleProps {
    height: number;
}

const useStyles = makeStyles<Theme, StyleProps>(theme => ({
  root: {
    background: 'green',
    height: ({height}) => height,
  },
}));

export default function Hook() {

  const props = {
    height: 48
  }

  const classes = useStyles(props);
  return <Button className={classes.root}>Styled with Hook API</Button>;
}

如果你想玩它，试试这个 CodeSandbox

这是官方的 Material-UI 演示。

这是一个非常简单的例子。它使用类似于样式化组件的语法：

import React from "react";
import { makeStyles, Button } from "@material-ui/core";

const useStyles = makeStyles({
  root: {
    background: props => props.color,
    "&:hover": {
      background: props => props.hover
    }
  },
  label: { fontFamily: props => props.font }
});

export function MyButton(props) {
  const classes = useStyles(props);
  return <Button className={classes.root} classes={{ label: classes.label }}>My Button</Button>;
}


// and the JSX...
<MyButton color="red" hover="blue" font="Comic Sans MS" />

此演示使用makeStyles，但此功能在styled和 中也可用withStyles。

这于2018 年 11 月 3 日首次在@material-ui/styles 中引入，并从版本 4 开始包含在 @material-ui/core 中。

这个答案是在 4.0 版本之前写的，严重过时了！

说真的，如果您要设计函数组件的样式，请使用makeStyles.

在詹姆斯谭答案是4.x版本的最佳答案

下面的任何东西都是古老的：

当您使用 时withStyles，您可以访问theme，但不能访问props。

请注意，Github 上有一个请求此功能的未决问题，一些评论可能会为您指出您可能感兴趣的替代解决方案。

使用 props 更改卡片背景颜色的一种方法是使用内联样式设置此属性。我已经分叉了您的原始代码和盒子，并进行了一些更改，您可以查看修改后的版本以查看其实际效果。

这是我所做的：

1. 使用backgroundColorprop渲染组件：

// in index.js
if (rootElement) {
  render(<Demo backgroundColor="#f00" />, rootElement);
}

2. 使用此props将内联样式应用于卡片：

    function SimpleCard(props) {
      // in demo.js
      const { classes, backgroundColor } = props;
      const bull = <span className={classes.bullet}>•</span>;
      return (
        <div>
          <Card className={classes.card} style={{ backgroundColor }}>
            <CardContent>
              // etc

现在渲染的Card 组件具有红色 (#F00) 背景

查看文档的Overrides部分以了解其他选项。