<p dir="auto">Usage of the withStyles()-function enforces setting the classes property.</p>
<p dir="auto">TS doesn't seem to split <code class="notranslate">WithStyles&lt;ClassKey&gt;</code> from <code class="notranslate">P</code>. This could be seen as a typescript-fault, but I think it can easily be fixed within the type definition.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default function withStyles&lt;ClassKey extends string&gt;(
  style: StyleRules&lt;ClassKey&gt; | StyleRulesCallback&lt;ClassKey&gt;,
  options?: WithStylesOptions,
): &lt;P&gt;(
  component: React.ComponentType&lt;P &amp; WithStyles&lt;ClassKey&gt;&gt;,
) =&gt; React.ComponentType&lt;P &amp; StyledComponentProps&lt;ClassKey&gt;&gt;;"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-s1">withStyles</span><span class="pl-c1">&lt;</span><span class="pl-smi">ClassKey</span> <span class="pl-k">extends</span> <span class="pl-smi">string</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
  <span class="pl-s1">style</span>: <span class="pl-smi">StyleRules</span><span class="pl-kos">&lt;</span><span class="pl-smi">ClassKey</span><span class="pl-kos">&gt;</span> <span class="pl-c1">|</span> <span class="pl-smi">StyleRulesCallback</span><span class="pl-kos">&lt;</span><span class="pl-smi">ClassKey</span><span class="pl-kos">&gt;</span><span class="pl-kos">,</span>
  <span class="pl-s1">options</span>?: <span class="pl-smi">WithStylesOptions</span><span class="pl-kos">,</span>
<span class="pl-kos">)</span>: <span class="pl-c1">&lt;</span><span class="pl-smi">P</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
  <span class="pl-s1">component</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentType</span><span class="pl-kos">&lt;</span><span class="pl-smi">P</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">WithStyles</span><span class="pl-kos">&lt;</span><span class="pl-smi">ClassKey</span><span class="pl-kos">&gt;</span><span class="pl-kos">&gt;</span><span class="pl-kos">,</span>
<span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentType</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">ClassKey</span><span class="pl-kos">&gt;</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">One could replace</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;P&gt;(
  component: React.ComponentType&lt;P &amp; WithStyles&lt;ClassKey&gt;&gt;,
) =&gt; React.ComponentType&lt;P &amp; StyledComponentProps&lt;ClassKey&gt;&gt;;"><pre class="notranslate"><code class="notranslate">&lt;P&gt;(
  component: React.ComponentType&lt;P &amp; WithStyles&lt;ClassKey&gt;&gt;,
) =&gt; React.ComponentType&lt;P &amp; StyledComponentProps&lt;ClassKey&gt;&gt;;
</code></pre></div>
<p dir="auto">with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Omit } from 'material-ui/index';

&lt;P extends WithStyles&lt;ClassKey&gt;&gt;(
component: React.ComponentType&lt;P&gt;
) =&gt; React.ComponentType&lt;Omit&lt;P, keyof WithStyles&gt;&gt; &amp; StyledComponentProps&lt;ClassKey&gt;;"><pre class="notranslate"><code class="notranslate">import { Omit } from 'material-ui/index';

&lt;P extends WithStyles&lt;ClassKey&gt;&gt;(
component: React.ComponentType&lt;P&gt;
) =&gt; React.ComponentType&lt;Omit&lt;P, keyof WithStyles&gt;&gt; &amp; StyledComponentProps&lt;ClassKey&gt;;
</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/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>
<ul dir="auto">
<li>Compile without error</li>
</ul>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">(55,17): error TS2322: Type '{}' is not assignable to type '(IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Component&lt;{ classes: any; } &amp; StyledComponentProp...'.<br>
Type '{}' is not assignable to type 'IntrinsicAttributes &amp; { classes: any; } &amp; StyledComponentProps &amp; { children?: ReactNode; }'.<br>
Type '{}' is not assignable to type '{ classes: any; }'.<br>
Property 'classes' is missing in type '{}'.</p>
<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="const Test = withStyles({})((props: { classes: any }) =&gt; &lt;div/&gt;);
const App = () =&gt; &lt;Test /&gt;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-smi">Test</span> <span class="pl-c1">=</span> <span class="pl-en">withStyles</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-kos">(</span><span class="pl-s1">props</span>: <span class="pl-kos">{</span> <span class="pl-c1">classes</span>: <span class="pl-smi">any</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">div</span><span class="pl-kos"></span><span class="pl-c1">/</span>&gt;<span class="pl-kos">)</span>;
<span class="pl-s1">const</span> <span class="pl-smi">App</span> <span class="pl-c1">=</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-smi">Test</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></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>1.0.0-beta.30</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>none / compile-error</td>
</tr>
<tr>
<td>typescript</td>
<td>2.6.2</td>
</tr>
</tbody>
</table>
<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">I did find this: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="220013423" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/6520" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/6520/hovercard" href="https://github.com/mui/material-ui/issues/6520">#6520</a> which made me believe this should partly be solved.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Current versions of material ui should install in current versions of react without warnings</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Run <code class="notranslate">npm i</code> and see:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm WARN recompose@0.24.0 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-event-listener@0.4.5 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-transition-group@1.2.0 requires a peer of react@^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-transition-group@1.2.0 requires a peer of react-dom@^15.0.0 but none is installed. You must install peer dependencies yourself."><pre class="notranslate"><code class="notranslate">npm WARN recompose@0.24.0 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-event-listener@0.4.5 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-transition-group@1.2.0 requires a peer of react@^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-transition-group@1.2.0 requires a peer of react-dom@^15.0.0 but none is installed. You must install peer dependencies yourself.
</code></pre></div>
<p dir="auto">Check where this comes from:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="PS C:\Users\alex\apf2&gt; npm list react-event-listener
apf2@0.1.0 C:\Users\alex\apf2
`-- material-ui@0.19.3
  `-- react-event-listener@0.4.5

PS C:\Users\alex\apf2&gt; npm list recompose
apf2@0.1.0 C:\Users\alex\apf2
`-- material-ui@0.19.3
  `-- recompose@0.24.0

PS C:\Users\alex\apf2&gt; npm list react-transition-group
apf2@0.1.0 C:\Users\alex\apf2
`-- material-ui@0.19.3
  `-- react-transition-group@1.2.0"><pre class="notranslate"><code class="notranslate">PS C:\Users\alex\apf2&gt; npm list react-event-listener
apf2@0.1.0 C:\Users\alex\apf2
`-- material-ui@0.19.3
  `-- react-event-listener@0.4.5

PS C:\Users\alex\apf2&gt; npm list recompose
apf2@0.1.0 C:\Users\alex\apf2
`-- material-ui@0.19.3
  `-- recompose@0.24.0

PS C:\Users\alex\apf2&gt; npm list react-transition-group
apf2@0.1.0 C:\Users\alex\apf2
`-- material-ui@0.19.3
  `-- react-transition-group@1.2.0
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ul dir="auto">
<li>install react and react-dom v16.0.0</li>
<li>install material-ui v0.19.3</li>
<li>run npm i</li>
</ul>