Passing props to material UI style

Question

given card code as in here : card

how can I update the card style or any material UI style as from

    const styles = theme => ({
    card: {
           


        

Answer 1

Here's the official Material-UI demo.

And here's a very simple example. It uses syntax similar to Styled Components:

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


// and the JSX...

This demo uses makeStyles, but this feature is also available in styled and withStyles.

This was first introduced in @material-ui/styles on Nov 3, 2018 and was included in @material-ui/core starting with version 4.