小编典典

将道具传递给实体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" />

请帮忙!


阅读 241

收藏
2020-07-22

共1个答案

小编典典

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

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

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

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

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

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

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

这是我所做的:

  1. backgroundColor道具渲染组件:
    // in index.js
    if (rootElement) {
      render(<Demo backgroundColor="#f00" />, rootElement);
    }
  1. 使用此道具可以对卡片应用内联样式:

        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