小道具をマテリアルUIスタイルに渡す

Question

ここにあるように与えられたカードコード： card

カードスタイルまたはマテリアルUIスタイルを次のように更新するにはどうすればよいですか

    const styles = theme => ({
    card: {
    minWidth: 275,
  },

そのような次のように：

    const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

最新のものを試してみたら

 Line 15:  'props' is not defined  no-undef

私がコードを次のように更新したとき：

const styles = theme =>  (props) => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

また

 const styles  = (theme ,props) => ({
        card: {
        minWidth: 275, backgroundColor: props.color  },

の代わりに

const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

乱雑なWebページでコンポーネントカードのスタイルを取得しました。

ちなみに、私は小道具を次のように渡します：

<SimpleCard backgroundColor="#f5f2ff" />

助けてください！

Answer 1

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

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

export function MyButton(props) {
  const classes = useStyles({color: 'red', hover: 'green'});
  return <Button className={classes.root}>My Button</Button>;
}