reactjs 将 props 传递给 Material UI 样式

Passing props to material UI style

提问by Diamond

given card code as in here : card

给定的卡代码如下： 卡

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

如何更新卡片样式或任何材质 UI 样式

    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!

请帮忙！

采纳答案by Ken Gregory

This answer was written prior to version 4.0 severely out of date!

这个答案是在 4.0 版本之前写的，严重过时了！

Seriously, if you're styling a function component, use makeStyles.

说真的，如果您要设计函数组件的样式，请使用makeStyles.

The answer from James Tanis the best answer for version 4.x

在詹姆斯谭答案是4.x版本的最佳答案

Anything below here is ancient:

下面的任何东西都是古老的：

When you're using withStyles, you have access to the theme, but not props.

当您使用 时withStyles，您可以访问theme，但不能访问props。

Please note that there is an open issueon Github requesting this feature and some of the comments may point you to an alternative solution that may interest you.

请注意，Github 上有一个请求此功能的未决问题，其中一些评论可能会指向您可能感兴趣的替代解决方案。

One way to change the background color of a card using props would be to set this property using inline styles. I've forked your original codesandboxwith a few changes, you can view the modified versionto see this in action.

使用 props 更改卡片背景颜色的一种方法是使用内联样式设置此属性。我已经对您的原始代码和盒子进行了一些更改，您可以查看修改后的版本以查看其实际效果。

Here's what I did:

这是我所做的：

1. Render the component with a backgroundColorprop:

1. 使用backgroundColorprop渲染组件：

// in index.js
if (rootElement) {
  render(<Demo backgroundColor="#f00" />, rootElement);
}

1. Use this prop to apply an inline style to the card:

2. 使用此道具将内联样式应用于卡片：

    function SimpleCard(props) {
      // in demo.js
      const { classes, backgroundColor } = props;
      const bull = <span className={classes.bullet}>?</span>;
      return (
        <div>
          <Card className={classes.card} style={{ backgroundColor }}>
            <CardContent>
              // etc

Now the rendered Card componenthas a red (#F00) background

现在渲染的Card 组件具有红色 (#F00) 背景

Take a look at the Overridessection of the documentation for other options.

查看文档的Overrides部分以了解其他选项。

回答by James Tan

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

官方文档

回答by Dominus.Vobiscum

Here's the official Material-UI demo.

这是官方的 Material-UI 演示。

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 styledand withStyles.

此演示使用makeStyles，但此功能在styled和 中也可用withStyles。

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

这于2018 年 11 月 3 日首次在@material-ui/styles 中引入，并从版本 4 开始包含在 @material-ui/core 中。

回答by Kodovac

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

如何在 Material ui 中同时使用 props 和 theme 的解决方案：

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

回答by Ping Woo

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