title: React Material UI Syntax with Props Explained
body: <p>I understand the basic of react code such as passing data to child component and passing data back to parent with props. I encountered this code below from <a href="https://material-ui.com/demos/progress/" rel="nofollow noreferrer">React Material UI</a> which is abit confusing. Was hoping to get some explanation.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import CircularProgress from '@material-ui/core/CircularProgress';
  import purple from '@material-ui/core/colors/purple';
  
  const styles = theme =&gt; ({
    progress: {
      margin: theme.spacing.unit * 2,
    },
  });
  
  function CircularIndeterminate(props) {
    const { classes } = props;
    return (
      &lt;div&gt;
        &lt;CircularProgress className={classes.progress} /&gt;
        &lt;CircularProgress className={classes.progress} size={50} /&gt;
        &lt;CircularProgress className={classes.progress} color="secondary" /&gt;
        &lt;CircularProgress className={classes.progress} style={{ color: purple[500] }} thickness={7} /&gt;
      &lt;/div&gt;
    );
  }
  
  CircularIndeterminate.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(CircularIndeterminate);
  </code></pre>
  
  <p>Here is what I understand.</p>
  
  <p>1.The component takes in props so I can pass data down to this child component and before render it will extract the classes property from props.classes. </p>
  
  <p>2.There  is a styles function that takes in a theme variable and returns an object progress which has some styling which is used by classes.progress</p>
  
  <p>3.withStyle is some sort of higher order component.</p>
  
  <p>But with this knowledge, this code is abit confusing.</p>
  
  <p>How come the code can do classes.progress, why does classes variable have anything to do with the progress style</p>
  
  <p>What is the purpose of </p>
  
  <pre><code>CircularIndeterminate.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  </code></pre>