title: How to send styles from parent component to child component?
body: <p>I want to send style object from parent to a child component.
  Parent.js:</p>
  
  <pre><code>const styles = theme =&gt; ({
  
    field: {
      flexGrow: 1,
      position: 'relative',
      zIndex: 1,
    },
  });
  
  class Parent extends React.Component {
   render(){
    const {classes } = this.props
    return (
     &lt;div&gt;
      &lt;Child className={classes.field} /&gt;
     &lt;/div&gt;
    )
  }
  }
  </code></pre>
  
  <p>Child.js:</p>
  
  <pre><code>const styles = theme =&gt; ({
  
    container: {
      flexGrow: 1,
      position: 'relative',
      zIndex: 2,
    },
  });
  
  class Child extends React.Component {
   render(){
    const {classes} = this.props
    return (
     &lt;div&gt;
      &lt;Child className={classes.field} /&gt;
     &lt;/div&gt;
    )
  }
  }
  </code></pre>
  
  <p>This returns the object classes of the Child component does not contains the style field contained in the Parent component. Is there any suggestion to send styles from Parent to Child ?</p>