<p dir="auto">When using <code class="notranslate">withStyles()</code> hoc in typescript, I am getting the following error when trying to use the returned component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Type '{}' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;App&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt; &amp; Reado...'.
  Type '{}' is not assignable to type 'Readonly&lt;WithStyles&lt;&quot;main&quot;&gt;&gt;'.
    Property 'classes' is missing in type '{}'."><pre class="notranslate"><code class="notranslate">Type '{}' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;App&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt; &amp; Reado...'.
  Type '{}' is not assignable to type 'Readonly&lt;WithStyles&lt;"main"&gt;&gt;'.
    Property 'classes' is missing in type '{}'.
</code></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>
<p dir="auto">It appears <a href="https://github.com/callemall/material-ui/pull/8399" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/8399/hovercard">this change</a> to the type definition might be related to this issue.</p>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Given the <code class="notranslate">App</code> component code below, I should be able to use the component <code class="notranslate">&lt;App /&gt;</code> without the type error as I did in 1.0.0-beta.10.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Given the <code class="notranslate">App</code> component code below, trying to use <code class="notranslate">&lt;App /&gt;</code> results in the aforementioned error.</p>
<h2 dir="auto">The Code</h2>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import { withStyles } from 'material-ui/styles';

const styles = {
    main: {
        marginTop: 48,
        padding: 10,
    },
    foo: {
        margin: 0,
    },
};

interface Props {
    message: string;
};

type ClassNames = { classes: { [className in keyof typeof styles]: string } };

class App extends React.Component&lt;Props &amp; ClassNames&gt; {
    render() {
        const { classes, message } = this.props;
        return (
            &lt;div className={classes.main}&gt;
                &lt;div className={classes.foo} &gt;
                    Hello World! {message}
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
}

export default withStyles(styles)(App);"><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-kos">{</span> <span class="pl-s1">withStyles</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-s1">styles</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">main</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">marginTop</span>: <span class="pl-c1">48</span><span class="pl-kos">,</span>
        <span class="pl-c1">padding</span>: <span class="pl-c1">10</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">foo</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">margin</span>: <span class="pl-c1">0</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">interface</span> <span class="pl-smi">Props</span> <span class="pl-kos">{</span>
    <span class="pl-c1">message</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">ClassNames</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-kos">[</span><span class="pl-smi">className</span> <span class="pl-k">in</span> <span class="pl-k">keyof</span> <span class="pl-k">typeof</span> <span class="pl-s1">styles</span><span class="pl-kos">]</span>: <span class="pl-smi">string</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">App</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">Props</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">ClassNames</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> message <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">main</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</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">foo</span><span class="pl-kos">}</span> <span class="pl-c1">&gt;</span>
                    <span class="pl-smi">Hello</span> <span class="pl-smi">World</span><span class="pl-c1">!</span> <span class="pl-kos">{</span>message<span class="pl-kos">}</span>
                <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>div&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-s1"></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">App</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Context</h2>
    
<p dir="auto">The code worked fine in 1.0.0-beta.10, when I upgraded to 1.0.0-beta.12 I got the type error.</p>
<p dir="auto">In the code snippet provided I used the <code class="notranslate">keyof typeof styles</code> trick so that I would not need to define a list of class names twice (I strongly dislike the repetitiveness). I have also tried other variations:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="type ClassNames = WithStyles&lt;keyof typeof styles&gt;;"><pre class="notranslate"><span class="pl-k">type</span> <span class="pl-smi">ClassNames</span> <span class="pl-c1">=</span> <span class="pl-smi">WithStyles</span><span class="pl-kos">&lt;</span><span class="pl-k">keyof</span> <span class="pl-k">typeof</span> <span class="pl-s1">styles</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and doing it the more common way (as seen in <a href="https://github.com/sebald/material-ui/blob/db1a42102097344c2614a9163cd9a0125bfd655a/test/typescript/styles.spec.tsx#L58-L61">styles.spec.tsx</a>):</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="type ComponentClassNames = 'main' | 'foo';
type ClassNames = WithStyles&lt;ComponentClassNames&gt;;"><pre class="notranslate"><span class="pl-k">type</span> <span class="pl-smi">ComponentClassNames</span> <span class="pl-c1">=</span> <span class="pl-s">'main'</span> <span class="pl-c1">|</span> <span class="pl-s">'foo'</span><span class="pl-kos">;</span>
<span class="pl-k">type</span> <span class="pl-smi">ClassNames</span> <span class="pl-c1">=</span> <span class="pl-smi">WithStyles</span><span class="pl-kos">&lt;</span><span class="pl-smi">ComponentClassNames</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I still get the same error.</p>
<p dir="auto">It seems the previous type definition would return a component whose props type would be <code class="notranslate">StyledComponentProps</code> which has an optional <code class="notranslate">classes</code> property. The new definition...</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;P, C extends React.ComponentClass&lt;P &amp; StyledComponentProps&lt;Names&gt;&gt;&gt;(
    component: C
  ): C;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-smi">P</span><span class="pl-kos">,</span> <span class="pl-smi">C</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentClass</span><span class="pl-kos">&lt;</span><span class="pl-smi">P</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">StyledComponentProps</span><span class="pl-kos">&lt;</span><span class="pl-smi">Names</span><span class="pl-kos">&gt;</span><span class="pl-kos">&gt;</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
    <span class="pl-s1">component</span>: <span class="pl-smi">C</span>
  <span class="pl-kos">)</span>: <span class="pl-smi">C</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">...returns the same type <code class="notranslate">C</code> as the component, this means that passing <code class="notranslate">ClassNames</code> which is not marked optional propagates to the returned component. I see mentioned <a href="https://github.com/callemall/material-ui/pull/8399" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/8399/hovercard">here</a> the use of <code class="notranslate">Partial&lt;&gt;</code> which I think it an unsightly hack.</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.12</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 61.0.3163.100</td>
</tr>
</tbody>
</table>
<h3 dir="auto">Problem description</h3>
<p dir="auto">Cannot ad <code class="notranslate">xs</code> prop on <code class="notranslate">Grid</code> in Typescript (it works in 1.0.0-beta.6, according to the docs, the prop is still there: <a href="https://material-ui-1dab0.firebaseapp.com/api/grid/" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/api/grid/</a>).</p>
<h3 dir="auto">Steps to reproduce</h3>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as ui from 'material-ui';

function Grid() {
    return (
        &lt;ui.Grid container&gt;
            &lt;ui.Grid item xs={12} /&gt;
        &lt;/ui.Grid&gt;
    );
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">ui</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui'</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-smi">Grid</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
        <span class="pl-kos">&lt;</span><span class="pl-s1">ui</span><span class="pl-kos">.</span><span class="pl-smi">Grid</span> <span class="pl-smi">container</span><span class="pl-kos">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-s1">ui</span><span class="pl-kos">.</span><span class="pl-smi">Grid</span> <span class="pl-s1">item</span> <span class="pl-smi">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">12</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-s1">ui</span><span class="pl-kos">.</span><span class="pl-c1">Grid</span><span class="pl-c1">&gt;</span><span class="pl-s1"></span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Code above emits following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Property 'xs' does not exist on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Grid&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt; &amp; Read...'."><pre class="notranslate"><code class="notranslate">Property 'xs' does not exist on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Grid&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt; &amp; Read...'.
</code></pre></div>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 1.0.0-beta.7</li>
<li>typescript: 2.5.2</li>
</ul>