<p dir="auto">Hello,</p>
<p dir="auto">I wrap my component with withTheme()(Comp) however, I get function instead theme object.</p>
<p dir="auto">Is that about chaining (order etc) <code class="notranslate">withStyles(styles)(withTheme()(Comp))</code> because It works well at other components(which doesn't have this much chaining)?</p>


<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">Should pass theme object into the props</p>

<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Theme is function</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ƒ () {
    return _this.__theme__REACT_HOT_LOADER__.apply(_this, arguments);
}"><pre class="notranslate"><code class="notranslate">ƒ () {
    return _this.__theme__REACT_HOT_LOADER__.apply(_this, arguments);
}
</code></pre></div>

<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 {withStyles} from 'material-ui/styles';
import {withTheme} from 'material-ui';

class ControlPanel extends React.Component&lt;Props, State&gt; {
    constructor(props: Props) {
        super(props)
        this.props = props;
        this.state = {
           darkTheme: props.theme.palette.type == &quot;dark&quot;
        }
        console.log(props.theme)
        //here theme is function
    }
    render(...)
}

export default injectIntl(withStyles(styles)(withTheme()(withRouter(ControlPanel))));"><pre class="notranslate"><code class="notranslate">...
import {withStyles} from 'material-ui/styles';
import {withTheme} from 'material-ui';

class ControlPanel extends React.Component&lt;Props, State&gt; {
    constructor(props: Props) {
        super(props)
        this.props = props;
        this.state = {
           darkTheme: props.theme.palette.type == "dark"
        }
        console.log(props.theme)
        //here theme is function
    }
    render(...)
}

export default injectIntl(withStyles(styles)(withTheme()(withRouter(ControlPanel))));
</code></pre></div>

<p dir="auto">And, also when I edit component, I get this warning which I believe could be linked.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="main.bundle.js:73901 React Hot Loader: this component is not accepted by Hot Loader. 
Please check is it extracted as a top level class, a function or a variable. 
Click below to reveal the source location: 
 ƒ Style(props, context) {
        (0, _classCallCheck3.default)(this, Style);

        var _this = (0, _possibleConstructorReturn3.default)(this, (Style.__proto__ || (0, _getPrototypeOf2.default)(Style…
warnAboutUnnacceptedClass @ main.bundle.js:73901
resolveType @ main.bundle.js:73920
patchedCreateElement @ main.bundle.js:73942
render @ main.bundle.js:74472
render @ main.bundle.js:76797
finishClassComponent @ main.bundle.js:65916
updateClassComponent @ main.bundle.js:65893
beginWork @ main.bundle.js:66272
performUnitOfWork @ main.bundle.js:68240
workLoop @ main.bundle.js:68349
callCallback @ main.bundle.js:56966
invokeGuardedCallbackDev @ main.bundle.js:57005
invokeGuardedCallback @ main.bundle.js:56862
performWork @ main.bundle.js:68467
scheduleUpdateImpl @ main.bundle.js:68852
scheduleUpdate @ main.bundle.js:68791
scheduleTopLevelUpdate @ main.bundle.js:69062
updateContainer @ main.bundle.js:69092
renderSubtreeIntoContainer @ main.bundle.js:72775
render @ main.bundle.js:72796
(anonymous) @ main.bundle.js:91154
Promise resolved (async)
./src/index.js @ main.bundle.js:91150
__webpack_require__ @ main.bundle.js:708
hotApply @ main.bundle.js:632
(anonymous) @ main.bundle.js:314
Promise resolved (async)
hotUpdateDownloaded @ main.bundle.js:313
hotAddUpdateChunk @ main.bundle.js:290
webpackHotUpdateCallback @ main.bundle.js:32
(anonymous) @ 1.3ee591b153dc2b6585ad.hot-update.js:1
"><pre class="notranslate"><code class="notranslate">main.bundle.js:73901 React Hot Loader: this component is not accepted by Hot Loader. 
Please check is it extracted as a top level class, a function or a variable. 
Click below to reveal the source location: 
 ƒ Style(props, context) {
        (0, _classCallCheck3.default)(this, Style);

        var _this = (0, _possibleConstructorReturn3.default)(this, (Style.__proto__ || (0, _getPrototypeOf2.default)(Style…
warnAboutUnnacceptedClass @ main.bundle.js:73901
resolveType @ main.bundle.js:73920
patchedCreateElement @ main.bundle.js:73942
render @ main.bundle.js:74472
render @ main.bundle.js:76797
finishClassComponent @ main.bundle.js:65916
updateClassComponent @ main.bundle.js:65893
beginWork @ main.bundle.js:66272
performUnitOfWork @ main.bundle.js:68240
workLoop @ main.bundle.js:68349
callCallback @ main.bundle.js:56966
invokeGuardedCallbackDev @ main.bundle.js:57005
invokeGuardedCallback @ main.bundle.js:56862
performWork @ main.bundle.js:68467
scheduleUpdateImpl @ main.bundle.js:68852
scheduleUpdate @ main.bundle.js:68791
scheduleTopLevelUpdate @ main.bundle.js:69062
updateContainer @ main.bundle.js:69092
renderSubtreeIntoContainer @ main.bundle.js:72775
render @ main.bundle.js:72796
(anonymous) @ main.bundle.js:91154
Promise resolved (async)
./src/index.js @ main.bundle.js:91150
__webpack_require__ @ main.bundle.js:708
hotApply @ main.bundle.js:632
(anonymous) @ main.bundle.js:314
Promise resolved (async)
hotUpdateDownloaded @ main.bundle.js:313
hotAddUpdateChunk @ main.bundle.js:290
webpackHotUpdateCallback @ main.bundle.js:32
(anonymous) @ 1.3ee591b153dc2b6585ad.hot-update.js:1

</code></pre></div>
    
<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>beta 18</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>any</td>
</tr>
</tbody>
</table>
<p dir="auto">Thank you.</p>
<p dir="auto">Same as <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="257562818" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8190" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8190/hovercard" href="https://github.com/mui/material-ui/issues/8190">#8190</a>, the stepper should allow invalid children.</p>
<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">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.19.4</td>
</tr>
<tr>
<td>React</td>
<td>15.4.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>