reactjs - 将 props 传递给 Material UI 样式

Question

给定 Card 代码，如here 。如何更新卡片样式或任何 Material 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
},

我的网页组件卡样式很乱。

顺便说一下，我传递的 Prop 如下:

<SimpleCard backgroundColor="#f5f2ff" />

请帮忙!

Answer 1

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

这就是您想要的:

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>

Official Documentation