Passer des accessoires au style d'interface utilisateur matérielle

Question

code de carte donné comme ici: carte

comment puis-je mettre à jour le style de la carte ou tout autre style d'interface utilisateur matériel à partir de

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

à ce qui suit:

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

quand j'ai essayé le dernier, j'ai

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

quand j'ai mis à jour le code pour être:

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

aussi

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

au lieu de

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

J'ai le style de carte de composant sur la page Web en désordre.

Soit dit en passant, je passe les accessoires comme suit:

<SimpleCard backgroundColor="#f5f2ff" />

s'il vous plaît, aidez-moi!

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>;
}