<h3 dir="auto">Problem description</h3>
<p dir="auto">Cannot use more than one MuiThemeProvider, using <code class="notranslate">1.0.0-alpha.22</code>. We use multiple themes at once, but in this alpha version it seems to loose this capability. When we change the theme inner into the tree, the MuiThemeProvider in the upper tree breaks, the classnames are generated normally for the components when using multiple themes, but when the inner MuiThemeProvider changes, it shifts the stylesheets in the upper MuiThemeProvider in the head. It might be related with React Router, having different MuiThemeProvider inside the routes.</p>
<h3 dir="auto">Link to minimal working code that reproduces the issue</h3>
<p dir="auto">I will prepare an example reproducing the problem.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 1.0.0-alpha.22</li>
<li>React: 15.5.4</li>
<li>Browser: Indifrent</li>
</ul>
<p dir="auto">Given a case: I have 2 types of a Button, first one with rounded corners, second one without. Now in case I want all buttons inside of some subtree use the second type, I would want to use the MuiThemeProvider.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const theme1 = createMuiTheme({
  overrides: {
    Button: {
      root:  {
        borderRadius: 10
      }
    }
  }
}) 

const theme2 = createMuiTheme({
  overrides: {
    Button: {
      root:  {
        borderRadius: 0
      }
    }
  }
}) 

class Subtree extends Component {
  render() {
    return (
      &lt;ThemeProvider theme={theme2}&gt;
        &lt;Button&gt;Click  me hard&lt;/Button&gt;
     &lt;/ThemeProvider&gt;
    )
  }
} 

class App extends Component {
  render() {
    return (
      &lt;ThemeProvider theme={theme1}&gt;
        &lt;Subtree /&gt;
      &lt;/ThemeProvider&gt;
    )
  }
}
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">theme1</span> <span class="pl-c1">=</span> <span class="pl-en">createMuiTheme</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">overrides</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">Button</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">root</span>:  <span class="pl-kos">{</span>
        <span class="pl-c1">borderRadius</span>: <span class="pl-c1">10</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span> 

<span class="pl-k">const</span> <span class="pl-s1">theme2</span> <span class="pl-c1">=</span> <span class="pl-en">createMuiTheme</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">overrides</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">Button</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">root</span>:  <span class="pl-kos">{</span>
        <span class="pl-c1">borderRadius</span>: <span class="pl-c1">0</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span> 

<span class="pl-k">class</span> <span class="pl-v">Subtree</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">ThemeProvider</span> <span class="pl-c1">theme</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">theme2</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span>Click  me hard<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span>
     <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ThemeProvider</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span> 

<span class="pl-k">class</span> <span class="pl-v">App</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">ThemeProvider</span> <span class="pl-c1">theme</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">theme1</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Subtree</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ThemeProvider</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">In this case, theme2 will overwrite theme1 style sheet.</p>