Material-ui: Nesting of Overriden Themes

[NiyatiAardhy]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Theme nesting is not working as expected.
In below example, "MuiInput root of theme1" and "MuiInput underline of theme2" both should work.

Current Behavior

But here "MuiInput underline of theme2" works well but it does apply properties of "MuiInput root of theme1".

Steps to Reproduce (for bugs)

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 => ({
  ...outerTheme,
  overrides: {
      MuiInput: {
        underline: {
          '&::before': {
            height: 0,
          },
        },
      },
    },
  });

function Demo() {

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

export default Demo;

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0 beta.23 |
| React | 16.0.0 |

[oliviertassinari]

Theme merging won't happen by magic. Right now, you are rewriting the whole overrides object in theme2.