<ul dir="auto">
<li>[y ] I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto"><a href="https://codesandbox.io/s/mjy74qv98" rel="nofollow">https://codesandbox.io/s/mjy74qv98</a></p>
<p dir="auto">Is there any way to fix this?</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.19.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome V60</td>
</tr>
<tr>
<td>react-autosuggest</td>
<td>9.3.2</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Theme nesting is not working as expected.<br>
In below example, "MuiInput root of theme1" and "MuiInput underline of theme2" both should work.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">But here "MuiInput underline of theme2" works well but it does apply properties of "MuiInput root of theme1".</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import { createMuiTheme, MuiThemeProvider } from 'material-ui/styles';
import Input, { InputLabel } from 'material-ui/Input';


const theme1 = createMuiTheme({
  typography: {
      fontFamily:
        'Hind Vadodara',
      body1: {
        fontSize: 16,
      },
    },
    overrides: {
      MuiInput: {
        root: {
          fontSize: 16,
          color: 'red',
        },
      }
    },
  });

  const theme2 = outerTheme =&gt; ({
  ...outerTheme,
  overrides: {
      MuiInput: {
        underline: {
          '&amp;::before': {
            height: 0,
          },
        },
      },
    },
  });

function Demo() {

  return (
    &lt;MuiThemeProvider theme={theme1}&gt;
      &lt;div&gt;
           &lt;InputLabel style={{ margin :8 }}&gt;Title&lt;/InputLabel&gt;
           &lt;Input id=&quot;title&quot; /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;MuiThemeProvider theme={theme2}&gt;
            &lt;InputLabel style={{ margin :8 }}&gt;Title&lt;/InputLabel&gt;
            &lt;Input id=&quot;title&quot; /&gt;
        &lt;/MuiThemeProvider&gt;
      &lt;/div&gt;
    &lt;/MuiThemeProvider&gt;
  );
}

export default Demo;
"><pre class="notranslate"><code class="notranslate">import React from 'react';
import { createMuiTheme, MuiThemeProvider } from 'material-ui/styles';
import Input, { InputLabel } from 'material-ui/Input';


const theme1 = createMuiTheme({
  typography: {
      fontFamily:
        'Hind Vadodara',
      body1: {
        fontSize: 16,
      },
    },
    overrides: {
      MuiInput: {
        root: {
          fontSize: 16,
          color: 'red',
        },
      }
    },
  });

  const theme2 = outerTheme =&gt; ({
  ...outerTheme,
  overrides: {
      MuiInput: {
        underline: {
          '&amp;::before': {
            height: 0,
          },
        },
      },
    },
  });

function Demo() {

  return (
    &lt;MuiThemeProvider theme={theme1}&gt;
      &lt;div&gt;
           &lt;InputLabel style={{ margin :8 }}&gt;Title&lt;/InputLabel&gt;
           &lt;Input id="title" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;MuiThemeProvider theme={theme2}&gt;
            &lt;InputLabel style={{ margin :8 }}&gt;Title&lt;/InputLabel&gt;
            &lt;Input id="title" /&gt;
        &lt;/MuiThemeProvider&gt;
      &lt;/div&gt;
    &lt;/MuiThemeProvider&gt;
  );
}

export default Demo;

</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/29908792/33797427-9701e1f0-dd2d-11e7-9b6e-e9fa7dfc00d9.png"><img src="https://user-images.githubusercontent.com/29908792/33797427-9701e1f0-dd2d-11e7-9b6e-e9fa7dfc00d9.png" alt="screen shot 2017-12-09 at 10 04 43 pm" style="max-width: 100%;"></a></p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0 beta.23</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
</tbody>
</table>