将道具传递给实体UI样式

小编典典

将道具传递给实体UI样式

reactjs

给卡代码在这里：卡

我如何更新卡片样式或任何材料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  },

我在网页上弄乱了组件卡样式。

顺便说一句，我通过以下道具：

<SimpleCard backgroundColor="#f5f2ff" />

请帮忙！

阅读 243

2020-07-22

共1个答案

小编典典

该答案是在4.0版之前严重过时的！

认真地说，如果要对功能组件进行样式设置，请使用makeStyles。

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

下面的任何内容都是古老的：

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

请注意，Github上有一个要求解决此功能的公开问题，某些评论可能会为您提供您可能感兴趣的替代解决方案。

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

这是我所做的：

用backgroundColor道具渲染组件：

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

使用此道具可以对卡片应用内联样式：


        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

现在，渲染的Card组件具有红色（＃F00）背景

查看文档的“ 替代”部分，以了解其他选项。

2020-07-22