Passing props to MUI styles

Question

Given the Card code as in here. How can I update the card style or any material UI style as from:

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

To such follows:

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

when I tried the latest one, I got

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

when I updated code to be :

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

also

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

Instead of

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

I got the component card style at the web page messy.

By the way, I pass props as follows:

<SimpleCard backgroundColor="#f5f2ff" />

please help!

Answer 1

Deleted the old answer, because it's no reason for existence.

Here's what you want:

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; 

Now you can use it like:

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

Official Documentation

Answer 2

Solution for how to use both props and theme in material ui :

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

Answer 3

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 <Button className={classes.root} classes={{ label: classes.label }}>My Button</Button>;
}


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

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.

Answer 4

Here the Typescript solution:

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

If you want to play with it, try it in this CodeSandbox