<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">The application should compile without error</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When passing a component to the <code class="notranslate">withStyles</code> function I get this error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TS2345: Argument of type 'typeof ApplicationMenu' is not assignable to parameter of type 'ComponentType&lt;AppMenuProps &amp; WithStyles&lt;&quot;root&quot; | &quot;flex&quot; | &quot;menuButton&quot; | &quot;appBar&quot; | &quot;loginButton&quot;&gt;&gt;'.
  Type 'typeof ApplicationMenu' is not assignable to type 'StatelessComponent&lt;AppMenuProps &amp; WithStyles&lt;&quot;root&quot; | &quot;flex&quot; | &quot;menuButton&quot; | &quot;appBar&quot; | &quot;loginBu...'.
    Type 'typeof ApplicationMenu' provides no match for the signature '(props: AppMenuProps &amp; WithStyles&lt;&quot;root&quot; | &quot;flex&quot; | &quot;menuButton&quot; | &quot;appBar&quot; | &quot;loginButton&quot;&gt; &amp; { children?: ReactNode; }, context?: any): ReactElement&lt;any&gt; | null'."><pre class="notranslate"><code class="notranslate">TS2345: Argument of type 'typeof ApplicationMenu' is not assignable to parameter of type 'ComponentType&lt;AppMenuProps &amp; WithStyles&lt;"root" | "flex" | "menuButton" | "appBar" | "loginButton"&gt;&gt;'.
  Type 'typeof ApplicationMenu' is not assignable to type 'StatelessComponent&lt;AppMenuProps &amp; WithStyles&lt;"root" | "flex" | "menuButton" | "appBar" | "loginBu...'.
    Type 'typeof ApplicationMenu' provides no match for the signature '(props: AppMenuProps &amp; WithStyles&lt;"root" | "flex" | "menuButton" | "appBar" | "loginButton"&gt; &amp; { children?: ReactNode; }, context?: any): ReactElement&lt;any&gt; | null'.
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export interface AppMenuProps {
    classes: Record&lt;string, string | undefined&gt;
}

const styles = (theme : Theme) =&gt; ({
    root: {
        width: '100%',
    },
    flex: {
        flex: 1,
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20,
    },

    appBar: {
        background: theme.palette.common.black,
        color: theme.palette.common.white,
    },

    loginButton: {
        color: theme.palette.common.white
    }
});

class ApplicationMenu extends Component&lt;AppMenuProps, {}&gt; {

    render() {
        const {classes} = this.props;
        return (
            &lt;div className={classes.root}&gt;
                &lt;AppBar position=&quot;static&quot; classes={{root: classes.appBar}}&gt;
                    &lt;Toolbar&gt;
                        &lt;IconButton className={classes.menuButton} color=&quot;primary&quot; aria-label=&quot;Menu&quot;&gt;
                            &lt;MenuIcon/&gt;
                        &lt;/IconButton&gt;
                        &lt;Typography type=&quot;title&quot; color=&quot;inherit&quot; className={classes.flex}&gt;
                            Supportworks Dashboard
                        &lt;/Typography&gt;
                        &lt;Button classes={{root: classes.loginButton}}&gt;Login&lt;/Button&gt;
                    &lt;/Toolbar&gt;
                &lt;/AppBar&gt;
            &lt;/div&gt;
        );
    }
}

export default withStyles(styles)(ApplicationMenu) // Error Here"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">interface</span> <span class="pl-smi">AppMenuProps</span> <span class="pl-kos">{</span>
    <span class="pl-c1">classes</span>: <span class="pl-smi">Record</span><span class="pl-kos">&lt;</span><span class="pl-smi">string</span><span class="pl-kos">,</span> <span class="pl-smi">string</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-en">styles</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">theme</span> : <span class="pl-smi">Theme</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-c1">root</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">width</span>: <span class="pl-s">'100%'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">flex</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">flex</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">menuButton</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">marginLeft</span>: <span class="pl-c1">-</span><span class="pl-c1">12</span><span class="pl-kos">,</span>
        <span class="pl-c1">marginRight</span>: <span class="pl-c1">20</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>

    <span class="pl-c1">appBar</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">background</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">common</span><span class="pl-kos">.</span><span class="pl-c1">black</span><span class="pl-kos">,</span>
        <span class="pl-c1">color</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">common</span><span class="pl-kos">.</span><span class="pl-c1">white</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>

    <span class="pl-c1">loginButton</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">color</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">common</span><span class="pl-kos">.</span><span class="pl-c1">white</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-smi">ApplicationMenu</span> <span class="pl-k">extends</span> <span class="pl-smi">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">AppMenuProps</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">&gt;</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">const</span> <span class="pl-kos">{</span>classes<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</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-s1">div</span> <span class="pl-smi">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-s1">root</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-smi">AppBar</span> <span class="pl-smi">position</span><span class="pl-c1">=</span><span class="pl-s">"static"</span> <span class="pl-s1">classes</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-s1">root</span>: <span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-smi">appBar</span><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">Toolbar</span><span class="pl-kos">&gt;</span>
                        <span class="pl-c1">&lt;</span><span class="pl-smi">IconButton</span> <span class="pl-s1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-c1">menuButton</span><span class="pl-kos">}</span> <span class="pl-s1">color</span><span class="pl-c1">=</span><span class="pl-s">"primary"</span> <span class="pl-s1">aria</span><span class="pl-c1">-</span><span class="pl-s1">label</span><span class="pl-c1">=</span><span class="pl-s">"Menu"</span><span class="pl-c1">&gt;</span>
                            <span class="pl-c1">&lt;</span><span class="pl-smi">MenuIcon</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                        <span class="pl-kos">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">IconButton</span><span class="pl-kos">&gt;</span>
                        <span class="pl-c1">&lt;</span><span class="pl-smi">Typography</span> <span class="pl-s1">type</span><span class="pl-c1">=</span><span class="pl-s">"title"</span> <span class="pl-s1">color</span><span class="pl-c1">=</span><span class="pl-s">"inherit"</span> <span class="pl-smi">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-c1">flex</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                            <span class="pl-smi">Supportworks</span> <span class="pl-smi">Dashboard</span>
                        <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>Typography&gt;</span><span class="pl-c1"></span>
                        <span class="pl-c1">&lt;</span><span class="pl-smi">Button</span> <span class="pl-s1">classes</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">root</span>: <span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">loginButton</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-smi">Login</span><span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>Button&gt;</span><span class="pl-c1"></span>
                    <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>Toolbar&gt;</span><span class="pl-c1"></span>
                <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>AppBar&gt;</span>
<span class="pl-pds">            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span>div</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-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-smi">ApplicationMenu</span><span class="pl-kos">)</span> <span class="pl-c">// Error Here</span></pre></div>
<h2 dir="auto">Context</h2>

<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.22</td>
</tr>
<tr>
<td>React</td>
<td>^16.1.1</td>
</tr>
<tr>
<td>browser</td>
<td>NA</td>
</tr>
<tr>
<td>etc</td>
<td>Typescript 2.6.2</td>
</tr>
</tbody>
</table>
<p dir="auto">This issue applies to the <code class="notranslate">v1-beta</code> branch. The typescript type definitions of <code class="notranslate">StyleRules</code> and <code class="notranslate">Theme</code> are not compatible and cause a typescript type conflict.</p>
<p dir="auto">As an example consider the following typical case:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { withStyles, Theme, StyleRulesCallback } from 'material-ui/styles';

const styles: StyleRulesCallback = (theme: Theme) =&gt; ({
    root: theme.typography.button,
});

const Component = (props: any) =&gt; &lt;p className={props.classes.root}&gt;Test&lt;/p&gt;;

export default withStyles(styles)(Component);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">withStyles</span><span class="pl-kos">,</span> <span class="pl-smi">Theme</span><span class="pl-kos">,</span> <span class="pl-smi">StyleRulesCallback</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">const</span> <span class="pl-en">styles</span>: <span class="pl-smi">StyleRulesCallback</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">theme</span>: <span class="pl-smi">Theme</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-c1">root</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">typography</span><span class="pl-kos">.</span><span class="pl-c1">button</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-smi">Component</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-smi">any</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">&lt;</span><span class="pl-s1">p</span> <span class="pl-s1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-smi">root</span><span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-smi">Test</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span>p&gt;;

<span class="pl-s1">export</span> <span class="pl-k">default</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-smi">Component</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>


<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">The constant <code class="notranslate">styles</code> should correctly type check.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The constant <code class="notranslate">styles</code> does not type check correctly. The problem is an incompatibility between the types <code class="notranslate">StyleRules</code> (defined in <code class="notranslate">src/styles/withStyles.d.ts</code>) and <code class="notranslate">Theme</code> (defined in <code class="notranslate">src/styles/createMuiTheme.d.ts</code>):</p>
<ul dir="auto">
<li>the object <code class="notranslate">{root: theme.typography.button}</code> is supposed to be of type <code class="notranslate">StyleRule</code> (because <code class="notranslate">styles</code> is declared to be <code class="notranslate">StyleRulesCallback</code> as expected by the call to <code class="notranslate">withStyles</code>)
<ul dir="auto">
<li>the entry <code class="notranslate">fontWeight</code> in a <code class="notranslate">StyleRule</code> object is defined to be as defined in <code class="notranslate">React.CSSProperties</code>, i.e., <code class="notranslate">"initial" | "inherit" | "unset" | "normal" | "bold" | "bolder" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</code></li>
</ul>
</li>
<li><code class="notranslate">theme.typography.button</code> is of type <code class="notranslate">TypographyStyle</code>, whose <code class="notranslate">fontWeight</code> property is of type <code class="notranslate">number | string</code></li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Just take the code above and typecheck with TypeScript.</li>
</ol>
<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-beta</td>
</tr>
<tr>
<td>React</td>
<td>15.6</td>
</tr>
</tbody>
</table>