<p dir="auto">On this page specifically: <a href="https://material-ui-1dab0.firebaseapp.com/customization/themes" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/customization/themes</a>, not the others apparently.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: alpha 17</li>
<li>Browser: Firefox &amp; chrome</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>