How to pass props to Material UI class

Question

I have a progressbar component where I am using animations to move the progressbar. I am using Material UI classes to style the component and I am using the component in one of my other component (Where I am passing props to progressbar component). I can able to get the props under my render method but I am not able to access the props above my class declaration. Any idea guys? Sorry if it is a stupid question, I am just 1 week old in react world. Thanks in advance

1. progressbar

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. Parent component

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

What I need to achieve is somehow make the moveTranslateX keyframe to value dynamic or props value. I am not able to pass my props to moveTranslateX. Any idea guys?

Answer 1

You can access the props passed to the higher order component ( withStyles ) like so:

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

And here is a simple working example