title: Material UI nested theme providers breaks withStyles HOC
body: <p>I have a React application created with Create React App and I use the @material-ui/core npm package for theming.</p>
  
  <p>To customize components I use the withStyles higher-order component provided by MaterialUI.</p>
  
  <p>According to documentation it supports nested ThemeProviders <a href="https://material-ui.com/customization/theming/#nesting-the-theme" rel="nofollow noreferrer">https://material-ui.com/customization/theming/#nesting-the-theme</a>.</p>
  
  <p>But inside the child ThemeProvider withStyles won't apply classes.</p>
  
  <p>Here is a basic application demonstrating the issue -> <a href="https://codesandbox.io/s/vibrant-tree-eh83d" rel="nofollow noreferrer">https://codesandbox.io/s/vibrant-tree-eh83d</a></p>
  
  <p><strong>ExampleComponent.tsx</strong></p>
  
  <pre><code>import React, { FunctionComponent } from "react";
  import {
    WithStyles,
    withStyles,
    createStyles,
    StepButton,
    Step,
    Stepper,
    Box
  } from "@material-ui/core";
  
  const styles = createStyles({
    button: {
      "&amp; .MuiStepIcon-root.MuiStepIcon-active": {
        fill: "red"
      }
    }
  });
  
  interface Props extends WithStyles&lt;typeof styles&gt; {
    title: string;
  }
  
  const ExampleComponent: FunctionComponent&lt;Props&gt; = ({ title, classes }) =&gt; {
    console.log(title, classes);
    return (
      &lt;Box display="flex" alignItems="center"&gt;
        &lt;span&gt;{title}&lt;/span&gt;
        &lt;Stepper activeStep={0}&gt;
          &lt;Step&gt;
            &lt;StepButton className={classes.button}&gt;Test&lt;/StepButton&gt;;
          &lt;/Step&gt;
        &lt;/Stepper&gt;
      &lt;/Box&gt;
    );
  };
  
  export default withStyles(styles)(ExampleComponent);
  </code></pre>
  
  <p><strong>App.tsx</strong></p>
  
  <pre><code>import * as React from "react";
  import { ThemeProvider, createMuiTheme } from "@material-ui/core";
  import ExampleComponent from "./ExampleComponent";
  
  const theme = createMuiTheme();
  
  function App() {
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;ExampleComponent title="Root" /&gt;
        &lt;ThemeProvider theme={theme}&gt;
          &lt;ExampleComponent title="Nested" /&gt;
        &lt;/ThemeProvider&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>Inside the ExampleComponent I console.log the generated classes object.</p>
  
  <p>I want to use nested ThemeProviders and override classes inside components regardless of the ThemeProvider.
  Am I missing something or is this not possible?</p>