如何将道具传递给 Material UI class

Question

我有一个进度条组件，我在其中使用动画来移动进度条。 我正在使用 Material UI 类来设置组件的样式，并且在我的其他组件之一中使用该组件（我将道具传递给进度条组件）。 我可以在我的渲染方法下获得道具，但我无法访问我的 class 声明上方的道具。 有什么想法吗？ 抱歉，如果这是一个愚蠢的问题，我在反应世界中只有 1 周大。 提前致谢

1. 进度条

import { withStyles } from "@material-ui/core/styles";
import { connect } from "react-redux";

const styles = theme => ({
  stat: {
    width: `100%`
  },
  "@keyframes moveTranslateX": {
    from: { transform: `translateX(0px)` },
    to: { transform: `translateX(78.1875px)` }
  },
  "@keyframes scaleX": {
    from: { transform: `scale(0, 1)` },
    to: { transform: `scale(1, 1)` }
  },
  StatVal: {
    position: "absolute",
    top: "0.125rem",
    height: "0.1875rem",
    backgroundColor: "#FFA400",
    zIndex: 2,
    transformOrigin: "0 50%",
    animationName: "scaleX",
    animationDuration: "1.5s"
  },
  StatValBall: {
    position: "absolute",
    display: "inline-block",
    height: "0.4375rem",
    width: "0.4375rem",
    borderRadius: "0.21875rem",
    backgroundColor: "#FFA400",
    zIndex: 2
  },
});

class Progressbar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { classes, val } = this.props;
    const barWith = parseInt(this.props.val * 100, 10);

    const width = { width: `${barWith}%` };
    const statValBalStyles = {
      // left: `${barWith}%`,
      animationName: "moveTranslateX",
      animationDuration: "1.5s",
      animationFillMode: "forwards"
    };

    return (
      <div>
        <div>
          <div className={classes.StatVal} style={width} />
          <div className={classes.StatValBall} style={statValBalStyles} />
        </div>
      </div>
    );
  }
}

export default connect()(withStyles(styles)(Progressbar));

2. 父组件

<Progressbar val={item.value.toFixed(2)}></Progressbar>

我需要实现的是以某种方式使 moveTranslateX 关键帧值动态或道具值。 我无法将我的道具传递给 moveTranslateX。 有什么想法吗？

Answer 1

您可以像这样访问传递给高阶组件（ withStyles ）的道具：

const styles = ()=>({
  root:{
    backgroundColor: props=>props.color
  }
})

这是一个简单的工作示例