title: How to pass className style to sub component in `material-ui`?
body: <p>Material UI uses <code>className</code> for stying. But how can I pass the style to sub react component?</p>
  
  <p>Below is my style definition.</p>
  
  <pre><code>const styles = createStyles({
        root: {
          backgroundColor: 'transparent !important',
          boxShadow: 'none',
          paddingTop: '25px',
          color: '#FFFFFF'
        },
        subComponentStyle: {
           ...
        }
      });
  </code></pre>
  
  <p>And I use this like:</p>
  
  <pre><code>...
  const NavigationBar = (props) =&gt; {
     const { classes } = props;
     return ( 
         &lt;div className={classes.root}&gt;
          // Add other code here
            &lt;SubComponent ... &gt; // how to pass `classes.subComponentStyle` style here
         &lt;/div&gt;
     )
  }
  ...
  export default withStyles(styles)(NavigationBar);
  </code></pre>
  
  <p>If the <code>SubComponent</code> component is also exported with <code>withStyles</code>. How can I pass some styles to override its own styling?</p>
  
  <p>My <code>SubComponent</code> is exported as:</p>
  
  <pre><code>const styles = createStyles({
     ...
  });
  
  const SubComponent = ({classes}) =&gt; {
  ...
  }
  
  export default withStyles(styles)(SubComponent);
  </code></pre>
  
  <p>as you can see, it has its own <code>classes</code>. I don't want to override its classes completely. Is there a way to merge the passed in classes with its internal classes?</p>