<h3 dir="auto">Problem description</h3>
<p dir="auto">When using TypeScript and upgrading to <code class="notranslate">1.0.0-beta.7</code>, I get the following type error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Failed to compile.

/Users/wcandillon/tmp/fitspace/node_modules/material-ui/styles/withTheme.d.ts
(1,23): error TS2307: Cannot find module './theme'."><pre class="notranslate"><code class="notranslate">Failed to compile.

/Users/wcandillon/tmp/fitspace/node_modules/material-ui/styles/withTheme.d.ts
(1,23): error TS2307: Cannot find module './theme'.
</code></pre></div>
<p dir="auto">This error seems to make sense since <code class="notranslate">./theme</code> doesn't exists in <code class="notranslate">node_modules/material-ui/styles</code>.</p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Here is a simple app example</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from &quot;react&quot;;
import * as ReactDOM from &quot;react-dom&quot;;

import { MuiThemeProvider, createMuiTheme, createTypography, createPalette } from &quot;material-ui/styles&quot;;
import { FontStyle } from &quot;material-ui/styles/typography&quot;;
import { Palette } from &quot;material-ui/styles/palette&quot;;


const palette: Palette = createPalette({});

const fontStyle: FontStyle = {
    fontFamily: &quot;Lato, Roboto, Helvetica, Arial, sans-serif&quot;,
    fontSize: &quot;14px&quot;,
    fontWeightLight: 300,
    fontWeightRegular: &quot;normal&quot;,
    fontWeightMedium: &quot;bold&quot;
};

const theme = createMuiTheme({
    typography: createTypography(palette, fontStyle)
});

ReactDOM.render(
    &lt;MuiThemeProvider {...{theme}}&gt;
        &lt;div&gt;Hello&lt;/div&gt;
    &lt;/MuiThemeProvider&gt;,
    document.getElementById(&quot;root&quot;) as HTMLElement
);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">"react-dom"</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">MuiThemeProvider</span><span class="pl-kos">,</span> <span class="pl-s1">createMuiTheme</span><span class="pl-kos">,</span> <span class="pl-s1">createTypography</span><span class="pl-kos">,</span> <span class="pl-s1">createPalette</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"material-ui/styles"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">FontStyle</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"material-ui/styles/typography"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">Palette</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"material-ui/styles/palette"</span><span class="pl-kos">;</span>


<span class="pl-k">const</span> <span class="pl-s1">palette</span>: <span class="pl-smi">Palette</span> <span class="pl-c1">=</span> <span class="pl-en">createPalette</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">fontStyle</span>: <span class="pl-smi">FontStyle</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">fontFamily</span>: <span class="pl-s">"Lato, Roboto, Helvetica, Arial, sans-serif"</span><span class="pl-kos">,</span>
    <span class="pl-c1">fontSize</span>: <span class="pl-s">"14px"</span><span class="pl-kos">,</span>
    <span class="pl-c1">fontWeightLight</span>: <span class="pl-c1">300</span><span class="pl-kos">,</span>
    <span class="pl-c1">fontWeightRegular</span>: <span class="pl-s">"normal"</span><span class="pl-kos">,</span>
    <span class="pl-c1">fontWeightMedium</span>: <span class="pl-s">"bold"</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">theme</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">typography</span>: <span class="pl-en">createTypography</span><span class="pl-kos">(</span><span class="pl-s1">palette</span><span class="pl-kos">,</span> <span class="pl-s1">fontStyle</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span>
    <span class="pl-kos">&lt;</span><span class="pl-smi">MuiThemeProvider</span><span class="pl-kos"></span> <span class="pl-kos">{</span>...<span class="pl-kos">{</span>theme<span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-smi">Hello</span><span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>div&gt;</span><span class="pl-c1"></span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span>MuiThemeProvider&gt;,
    <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"root"</span><span class="pl-kos">)</span> <span class="pl-k">as</span> <span class="pl-smi">HTMLElement</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI:  1.0.0-beta.7</li>
<li>React: 15.6.1</li>
<li>Browser: Any</li>
</ul>
<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/callemall/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">I expect the tests to run without a problem.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">I get an error:</p>
<blockquote>
<p dir="auto">TypeError: parentInstance.children.indexOf is not a function</p>
</blockquote>
<p dir="auto">I think this is due to portals not working properly in combination with jest snapshots.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import { storiesOf } from '@storybook/react';
import AlertDialog from './AlertDialog';

storiesOf('AlertDialog', module)
  .add('basic', () =&gt; &lt;AlertDialog bodyKey=&quot;test&quot; onClick={() =&gt; {}} titleKey=&quot;test&quot; open /&gt;);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">storiesOf</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@storybook/react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">AlertDialog</span> <span class="pl-k">from</span> <span class="pl-s">'./AlertDialog'</span><span class="pl-kos">;</span>

<span class="pl-en">storiesOf</span><span class="pl-kos">(</span><span class="pl-s">'AlertDialog'</span><span class="pl-kos">,</span> <span class="pl-smi">module</span><span class="pl-kos">)</span>
  <span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">'basic'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">AlertDialog</span> <span class="pl-c1">bodyKey</span><span class="pl-c1">=</span><span class="pl-s">"test"</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</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-c1">titleKey</span><span class="pl-c1">=</span><span class="pl-s">"test"</span> <span class="pl-c1">open</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Where <code class="notranslate">&lt;AlertDialog /&gt;</code> is a boring wrapper around <code class="notranslate">&lt;Dialog /&gt;</code>.</p>
<p dir="auto">I'm sorry for not including a code snippet. I don't know how to set up the tests to illustrate the issue, but I tried my best to provide as much relevant information as possible.</p>

<h2 dir="auto">Context</h2>
    
<p dir="auto">I'm using storybooks with storysnaps (jest snapshots), and our tests are failing. I'm pretty sure it has something to do with <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="260735982" data-permission-text="Title is private" data-url="https://github.com/enzymejs/enzyme/issues/1150" data-hovercard-type="issue" data-hovercard-url="/enzymejs/enzyme/issues/1150/hovercard" href="https://github.com/enzymejs/enzyme/issues/1150">enzymejs/enzyme#1150</a> and potentially <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="271076754" data-permission-text="Title is private" data-url="https://github.com/reactjs/react-modal/issues/553" data-hovercard-type="issue" data-hovercard-url="/reactjs/react-modal/issues/553/hovercard" href="https://github.com/reactjs/react-modal/issues/553">reactjs/react-modal#553</a> could benefit from a solution as well.</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>1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Additional</h2>
<p dir="auto">I have a feeling this is something that could be caught in storyshots but I'm not experienced enough with the material at hand. Any pointers, or better yet solutions would be greatly appreciated.</p>
<p dir="auto">I'm not against fixing it and contributing either (if I get the right pointers to help me out).</p>